包裹两个相邻的td答案

【问题标题】：Wrap two adjacent td's包裹两个相邻的td
【发布时间】：2013-05-03 21:24:33
【问题描述】：

我有一张有两列的表格，宽度均为 300 像素，在普通计算机屏幕上占 600 像素。

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

有没有一种 CSS 方法可以使右列的单元格换行并走到左列单元格的下方，然后是下一个左列单元格，然后是下一个右列单元格，依此类推？

【问题讨论】：

您真的在使用<table><tr><td>... 标记吗？你的表有多少行？你能发布你的 HTML 吗？
谷歌媒体查询
你可以用 div 来做到这一点，表真的应该只用于表格数据
确实是表格数据。
通过媒体查询定位特定设备是一种非常糟糕的方法。（参见：designshack.net/articles/css/… 和 blog.cloudfour.com/…）

标签： css html-table responsive-design

【解决方案1】：

这是一个概念验证演示。

考虑下表：

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

【讨论】：

【解决方案2】：

表格就像任何其他 HTML 元素一样。如果你不喜欢它的显示方式，你可以改变它的显示属性。

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

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

【讨论】：

除了这在 IE 9 和更早版本上不起作用，尽管这可能与这里无关。
媒体查询无论如何都不能在 IE8 和更早版本中工作，但它确实可以在 IE9 中工作。
谢谢你，@cinnamon，我需要知道这一点。从长远来看，这绝对是最有帮助的。
问题中出现的代码不适用于 IE 9 及更早版本。这些版本具有内置的表格格式化例程，因此在与表格相关的元素上设置display 是无效的。
谢谢你，@Jukka。我问了这个问题，以便我可以为小屏幕设备编写 CSS。据我所知，他们没有 IE9。不过，我非常感谢您指出这一点，它在更大的背景下非常有用（双关语）。

【解决方案3】：

您需要使用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;
    }
}

要针对更通用的设备数组，您可以使用更通用的查询来捕获更多屏幕尺寸：

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

DEMO（调整浏览器窗口大小）

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

【讨论】：

为什么是min-device-width : 320px？
因为 iPhone 5 屏幕的最小宽度（即纵向模式）将是 320 像素。这可确保您只针对 iPhone 5 或尺寸完全相同的设备。如果你想要一个更通用的查询，你可以省略 min-device-width 和方向，只使用 max-device-width
谢谢！我刚刚习惯了媒体查询，所以你的 cmets 很有启发性。
我看不到这里的逻辑。您将重新格式化表格限制为宽度 >= 320 像素且处于纵向模式的设备，因此任何小于该宽度或处于横向模式的设备都会获得正常的表格格式？
@cimmanon 我在说明如何定位特定设备。在它的正下方有一个更通用的示例。