响应式CSS表格

问题描述：

我创建了一个表格宽度为4的图像，这些图像放置在一行和四列（1x4）中。响应式CSS表格

<table class="insrtTable"> 

    <tr> 
     <td><img src=Guitarra.png></td> 
     <td><img src=Bajo.png></td> 
     <td><img src=Teclado.png></td> 
     <td><img src=Ukelete.png></td> 
    </tr> 
</table>

我的问题是，我需要看到两行两列（2×2）在我的手机中的图像。（像这样）

<table class="insrtTable"> 

    <tr> 
      <td><img src=Guitarra.png></td> 
      <td><img src=Bajo.png></td>  
    </tr> 
    <tr> 
      <td><img src=Teclado.png></td> 
      <td><img src=Ukelete.png></td> 
    </tr> 
</table>

我怎么能这样做？我看到很多负责任的表格，将1列和4行转换成4列和1行，但我找不到适合我的人。

答

您要查找的单词是“响应式”，而不是“负责任”。

我该怎么做？我看到很多负责任的表格，将1列和4行转换为4列和1行，但我无法找到适合我的工作表。

最多使用Bootstrap列来实现此目的。

我不好，我现在编辑 –

没问题。了解正确的术语可以使研究问题解决方案变得更容易。 – Strikegently

答

无法用表格进行响应式设计。使用其他方式。我建议flex容器或浮动和清除。 This网站是为flex容器。

答

要回答的实际问题，是的，你可以让有些敏感的表，但是这将涉及unnecessary hacking因为table S其中从来就不是响应早在70年代，他们创建时。而当你试图用更高级的东西来做时，你可能会用尽所有的选择。

一种现代的CSS布局方法是使用类似flexbox的东西。你可以解决这个问题是这样的：

<div class="container"> 
    <div class="col">1</div> 
    <div class="col">2</div> 
    <div class="col">3</div> 
    <div class="col">4</div> 
</div> 


.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.container > .col { 
    background: tomato; 
    padding: 16px; 
    border: 5px solid black; 
    width: 50%; 
} 

@media (min-width: 599px) { 
    .container > .col { 
    width: 25% !important; 
    } 
}

看到它在这里的行动：https://codepen.io/nicooga/pen/MEwZgZ。关键是flex-wrap: wrap，如果元素超过容器的大小，它允许元素溢出到下一行。

所有您需要了解的有关flexbox的信息，请访问：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

似乎有一个全新的本地CSS网格系统似乎做了所有这些对flexbox和更多：https://css-tricks.com/snippets/css/complete-guide-grid/伟大。

答

你可以试试这个简单的解决方案。

首先，添加要打破行（TD带班RESP）

<table class="insrtTable"> 

     <tr> 
      <td><img src="img1.png"></td> 
      <td><img src="img2.png"></td> 
      <td class="resp"></td> 
      <td class=""><img src="img3.png"></td> 
      <td class=""><img src="img4.png"></td> 
     </tr> 
    </table>

然后应用以下样式表中的一个TD占位符：

@media only screen and (max-width: 767px), (min-device-width: 768px) and (max-device-width: 1024px) { 

    thead, tbody, th, td.resp, tr { 
     display: block; 
    } 
}

如果减少了浏览器窗口的大小在768px以下，它会在第一行打破2个图像，在第二行打破2个。

您可以将此方法应用于超过4列，并在需要的位置设置占位符。

答

尝试使用像Flexbox或Bootstrap网格系统这样的网格系统。你也可以制作自己的网格系统，但你只需重新发明*。

响应速度也绑你如何标记你的CSS属性，一个简单的例子： -

<div class="container"> 
Text content </div> 

.container { 
width:3px; <!-- vs width:3%; --> }

使用％值，而不是像素硬编码值，可以使你的网站的响应的差异。

开发自己的网格中的有用的源系统 - https://zellwk.com/blog/responsive-grid-system/

响应式CSS表格

相关推荐