我有一个 html 表格:
<table>
<tr> <td>data...</td> <td>data...</td> <td>data...</td> </tr>
</table>
这显示为:
-------------------------
|data...|data...|data...|
-------------------------
这在大屏幕上很好，但我想要的是在屏幕很小的情况下根据需要将列分成多行。
所以当需要时表格会显示为:
----------
|data....|
|--------|
|data....|
|--------|
|data....|
----------
有没有办法用 css 之类的东西做到这一点？
最佳答案
您可以使用媒体查询更改为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>关于HTML 拆分表列 (TD) 到小屏幕上的多行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37254347/