基於顯示寬度的表列數量

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>