如何在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>

Answer 2

您要完成的工作通常称为响应式设计，并且有许多优秀的解决方案，例如bootstrap，可提供您需要的所有功能。

我建议使用除了表格之外的东西（div很好）。但是，如果您要表示数据，则会为此制作表格。

我强烈建议你寻找一个布局库/框架，特别是如果你处理表格数据，他们有很好的既定模式，有助于指导你的设计决策，并为你提供一个体面的蓝图重新布局。

这些类型的框架将适应简单布局突然变得更加复杂的情况。

Answer 3

您可以使用display:inline-block或css

尝试style

<table>
    <tr>
        <td style="display:inline-block">1</td>
        <td style="display:inline-block">2</td>
    </tr>
</table>

这样，换行符将应用于<td>元素。此处的浏览器兼容性：http://caniuse.com/#feat=inline-block