根据屏幕大小将列设置为新行，使网站响应

Question

我需要通过将最后两列作为新行移动来使我的页面响应。我如何在JavaScript中实现它？请给我一个javascript代码段。目前表是

<table>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr>
    <td>e</td>
    <td>f</td>
    <td>g</td>
    <td>h</td>
  </tr>
</table>

那应该改为

<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
  </tr>
</table>

这不仅可以用于调整浏览器屏幕的大小，还可以在移动手持设备上打开时使用

Answer 1

你正在过度思考这个问题。不要将table用于布局。使用table表格。

对于网站的网格，请使用其他更合适的block elements div或section。在你的情况下floating div是一种方法。

使用CSS media queries和基本HTML结构可以实现所需的功能。如果你实际上不需要它，请不要使用JavaScript。