javascript - 在 HTML 中调整表格的列

Question

我想要一个表格，如果页面宽度减小，表格的列应该一列显示在另一列之下。

Answer 1

您可以使用 CSS 显示属性来改变表格的行为方式。为了使表格单元格位于另一个之上，您需要创建一个媒体查询，它将表格和每个单元格设置为 display: block 在最适合您的断点处需要。

在下面的示例中，当屏幕宽度缩小到 500 像素时，表格单元格将换行。

例子

@media (max-width: 500px) {

    table {
        display: block;
        border: solid 1px #f00;
    }
    table td {
        display: block;
        border: solid 1px #f00;
    }
}

<table>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
    </tr>
</table>

说明

默认情况下，table 标记使用 display: table，表格单元格使用 display: table-cell。通过更改这些属性，我们可以更改表格的显示方式。

有关显示 属性的更多信息，请参阅这篇文章:

https://developer.mozilla.org/en-US/docs/Web/CSS/display

有关媒体查询的更多信息，请参阅以下文章:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries