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

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 divs将是一种方式。

你需要什么可以用CSS media queries和基本的HTML结构来实现。如果你不需要它，不要使用JavaScript。