javascript - 如何在 HTML 中使我的列动态化

Question

我有一个包含 2 列的表格，如示例所示，

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

当调整表格大小时(即宽度减小)，如何使 td 2 位于 td 1 下方而不是并排显示？

Answer 1

关于您当前的代码，您可以使用媒体查询定位宽度并将 td 的显示模式设置为 block

但我建议不要使用表进行动态重新排序，因为表中各行的数据越多，管理起来就越困难

@media (max-width: 768px) {
  td {
    display: block;
  }
}
table,
td {
  border: 1px solid gray;
}
td {
  width: 100px;
}

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