我有一个包含两列的表格,均为 300 像素宽,在常规计算机屏幕上的宽度为 600 像素。
我想为小屏幕移动设备修改该表格的显示。
有没有一种 CSS 方法可以使右列的单元格环绕并位于左列单元格的下方,然后是下一个左边的单元格,然后是下一个右边的单元格,依此类推?
最佳答案
这是一个概念验证演示。
考虑下表:
<table>
<tr>
<td>First Row - Cell 1</td>
<td>First Row - Cell 2</td>
</tr>
<tr>
<td>Second Row - Cell 1</td>
<td>Second Row - Cell 2</td>
</tr>
</table>
如果你 float 表格单元格,你可以让它们垂直堆叠,例如:
table {
width: auto;
}
table td {
background-color: lightgray;
float: left;
width: 150px;
margin: 10px 0;
}
您需要在媒体查询中调整表格宽度和单元格宽度。
使用 float 的一个优点是表格无需使用媒体查询即可响应,这在某些情况下可能很有用。
关于css - 包裹两个相邻的 td,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16461150/