HTML中断表列(TD)到小屏幕上的多行

Question

我有一个html表:

<table>
<tr> <td>data...</td>  <td>data...</td>  <td>data...</td> </tr>
</table>

这显示为:

-------------------------
|data...|data...|data...|
-------------------------

这在大屏幕上很好,但我想要的是如果屏幕很小,根据需要将列分成多行.

因此,在需要时,表格将显示为:

----------
|data....|
|--------|
|data....|
|--------|
|data....|
----------

有没有办法用css之类的东西做到这一点？

Answer 1

您可以更改为display: table-row媒体查询Fiddle

@media(max-width: 480px) {
  td {
    display: table-row;
  }
}

<table>
<tr> <td>data...</td>  <td>data...</td>  <td>data...</td> </tr>
</table>