Question

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

桌面：

Cell 1     Cell 2
Cell 3     Cell 4

移动：

Cell 1
Cell 2
Cell 3
Cell 4

Answer 1

可以通过将display:flex应用于tr并调整media query

中的td尺寸来完成

＆＃13;

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%;}
}

＆＃13;

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

＆＃13;

您可以找到功能示例here

Answer 2

我在这里回答了类似的问题：Forcing table cell onto new row

很简单，你在这里要做的是让表不表现为一个表，这是一个有趣的实现。话虽这么说，你可以这样做：https://jsfiddle.net/jz6mypvw/1/

使用@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>

基于显示宽度的表列数量

2 个答案: