包装两个相邻的TD

我有一个两列，两个300px宽，在普通电脑屏幕上600px宽度的表。包装两个相邻的TD

我想修改小屏幕移动设备的表格显示。

是否有一种CSS方法可以让右列的单元格包装并进入左列的单元格之下，接着是下一个左侧单元格，然后是下一个右侧单元格，等等？

来源

2013-05-09 Dimitri Vorontzov

您实际使用'

...'标记？你桌上有多少行？你能发布你的HTML吗？ – 2013-05-09 11:57:01

谷歌媒体查询 – 2013-05-09 11:59:01

你可以用div做这个，表格确实应该只用于表格数据 – user466764 2013-05-09 11:59:46

回答

这里是证明了概念的演示。

考虑下表：

<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>

如果浮在表格单元格，你可以让他们到垂直堆叠，例如：

table { 
    width: auto; 
} 
table td { 
    background-color: lightgray; 
    float: left; 
    width: 150px; 
    margin: 10px 0; 
}

您需要调整表格宽度和您的媒体查询中的单元格宽度。

使用浮动的一个优点是该表响应而不使用媒体查询，这在某些情况下可能很有用。

小提琴：http://jsfiddle.net/audetwebdesign/qSd7g/

来源

2013-05-09 12:15:50

非常感谢，@Marc！解决了我的问题。 – 2013-05-09 12:46:53

谢谢Dimitri，这是一个很好的帖子和讨论。祝一切顺利！ – 2013-05-09 14:06:37

努力通过jQuery实现这一点，这是纯CSS中的优秀解决方案。 – 2015-04-20 10:25:55

表格就像任何其他HTML元素一样。如果您不喜欢它正在显示的方式，则更改其显示属性。

table, tbody, tr, th, td { display: block } 
thead { display: none } /* optional */

演示重新格式化复杂表：http://codepen.io/cimmanon/pen/ukBqo

来源

2013-05-09 12:14:24 cimmanon

除了IE9和更旧的版本无法使用，尽管这可能与此无关。 – 2013-05-09 12:15:29

无论如何，媒体查询在IE8和更老的版本中都不起作用，但它肯定适用于IE9。 – cimmanon 2013-05-09 12:25:19

谢谢@cinnamon，我需要知道这一点。从长远来看，这绝对是最有帮助的。 – 2013-05-09 12:46:26

您需要使用media queries改变依赖于屏幕尺寸或浏览器宽度的CSS属性。

要定位在纵向模式下iPhone 5，你可以做这样的事情：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
    td { 
     width: 100%; 
     display: block; 
    } 
}

要定位devies的更一般的数组你可以使用一个更一般的查询，以捕捉更多的屏幕尺寸：

@media only screen 
and (max-width : 800px) { 
    td { 
     width: 100%; 
     display: block; 
    } 
}

DEMO（调整浏览器窗口）

没有为iPhone/iPad的相关媒体一个很好的资源查询HERE

来源

2013-05-09 12:16:32 Turnip

为什么'min-device-width：320px'？ – 2013-05-09 12:20:20

由于iPhone 5屏幕的最小宽度（即纵向模式）为320px。这可确保您仅针对iPhone 5或具有完全相同尺寸的设备。如果您想要更普遍的查询，您可以省略最小设备宽度和方向，只需使用最大设备宽度 – Turnip 2013-05-09 12:24:48

谢谢！我只是习惯媒体查询，所以你的意见是有启发性的。 – 2013-05-09 12:26:44

包装两个相邻的TD

回答

相关问题