基于显示宽度的表列数量

Question

我正在设计一个网站，在桌面上我有一个2列的表格，但是在移动设备上，该表格看起来并不理想。 是否可以根据屏幕宽度确定表格列的数量？

桌面：

Cell 1     Cell 2
Cell 3     Cell 4

移动：

Cell 1
Cell 2
Cell 3
Cell 4

Answer 1

可以通过将display:flex应用于您的tr并在媒体查询中调整td大小来完成

 table{width:100%;} tr { display: flex; flex-wrap: wrap; width:100%; } td { width: 50%; border:1px solid blue; box-sizing:border-box; } @media screen and (max-width:400px) { td{width:100%;} } 

 <table> <tr> <td>col 1</td> <td>col 2</td> </tr> <tr> <td>col 3</td> <td>col 4</td> </tr> </table> 

您可以在此处找到功能示例

Answer 2

我在这里回答了类似的问题：将表格单元格强制到新行

简而言之，您要在此处执行的操作是使表不像表那样运行，这是有趣的实现。 话虽如此，您可以执行以下操作： https : //jsfiddle.net/jz6mypvw/1/

使用@media查询，可以强制您的表在窗口变@media拆分成几行。 下面的示例在屏幕宽度< 800px时为2x2，最后在尺寸< 500px时为一列。

@media only screen and (max-width: 800px) {
    table tr td {
        display: block;
        width: 50%;
        box-sizing: border-box;
        float: left;
    }
}

@media only screen and (max-width: 500px) {
    table tr td {
        width: 100%;
    }
}

<table>
    <tr>
        <td class="col-1">One</td>
        <td class="col-2">Two</td>
        <td class="col-3">Three</td>
        <td class="col-4">Four</td>
    </tr>
</table>