3

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

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

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

4

3 回答 3

6

这是一个概念验证演示。

考虑下表：

<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-09T12:15:50.240 回答
3

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

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

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

于 2013-05-09T12:14:24.407 回答
1

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

演示（调整浏览器窗口大小）

iPhone / iPad 相关媒体查询有一个很好的资源这里

于 2013-05-09T12:16:32.293 回答