html - 如何使表格响应？ (堆栈列)

Question

我有一个具有这种结构的简单表格。

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

当我调整浏览器窗口大小时，它看起来是这样的:

| 1 | | 2 |

我怎样才能让它看起来像这样响应:

| 1 |
| 2 |

我试过 display: block 但我想我应该使用一些不同的东西。

Answer 1

如果您想要这种行为，我认为表格不是可行的方法。也许看看 bootstrap 如何处理它们的列。

http://getbootstrap.com/

话虽如此。可以这样做:

@media (max-width: 300px) {
  td {
    display: block;
  }
}

这是一个可以正常工作的 fiddle 。 https://jsfiddle.net/90pvLy8t/