包裹两个相邻的td [英] Wrap two adjacent td's

问题描述

我有一个表格，有两列，两个300像素宽，在常规计算机屏幕上宽度为600px。

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

有一种CSS方法可以使右列的单元格包裹在左侧列的单元格之下，接下来是左侧单元格，然后是下一个单元格，等等？

感谢您的帮助！

解决方案

 <$ c $ 
 c>< table> 
< tr> 
< td>第一行 - 单元格1< / td> 
< td>第一行 - 单元格2< / td> 
< / tr> 
< tr> 
< td>第二行 - 单元格1< / td> 
< td>第二行 - 单元格2< / td> 
< / tr> 
< / table> 
  

如果浮动表格单元格，可以让它们垂直堆叠，例如：

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

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

使用浮动广告素材的一个优点是，表格是响应式的，而不使用媒体查询，这在某些情况下可能是有用的。

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

I have a table with two columns, both 300px wide, taking 600px in width on a regular computer screen.

I want to modify the display of that table for small screen mobile devices.

Is there a CSS way to make the cell of the right column to wrap and go below the cell of the left column, followed by the next left cell, followed by the next right cell, and so on?

Thank you in advance for your help!

解决方案

Here is a proof-of-concept demonstration.

Consider the following table:

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

If you float the table cells, you can get them to stack vertically, for example:

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

You need to adjust the table width and the cell width in your media query.

The one advantage of using floats is that the table is responsive without using media queries, which may be useful in some instances.

Fiddle: http://jsfiddle.net/audetwebdesign/qSd7g/

这篇关于包裹两个相邻的td的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！