是否可以根据屏幕尺寸设置表格选项？

Question

我想知道我们是否可以使用Javascript，多表选项进行设置 例如，如果有这样的表：

<div>
<table>
<tr>
<td>bla bla</td>
<td>bla bla</td>
<td>bla bla</td>
<td>bla bla</td>
</tr>
</table>
</div>

因此，如果屏幕尺寸超过1200px，则应在一行上显示所有4 td个元素 如果屏幕尺寸介于800px和1200px之间，则它应该在一行上仅显示3 td 如果屏幕尺寸介于500px和800px之间，则应在一行中仅显示2 td 如果它小于500px，它应该在一行中只显示一个td

我知道如何仅显示最后一个选项，谢谢500px我可以添加CSS display:block

但是有可能制作4种变体吗？

Answer 1

使用事件监听器来调整窗口大小并检查根据窗口宽度显示的列数，你不能像使用js那样使用js进行css媒体查询。或者只是用css display：none和一些媒体查询

Answer 2

您可以在不使用javascript和使用媒体查询的情况下完成您要执行的操作。

我可以找到关于媒体查询的好的入门（教程）here。