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>

使用媒体查询,例如@media(max-width：800px),我想重构这个表,而不是有两列和四行,例如：

<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>

这可能吗？如果我假设是这种情况,那么JavaScript中的解决方案也是受欢迎的,这不能仅仅用CSS完成.

解决方法:

纯CSS

使用浮动和nth-child更改外观.

td { float:left; display:inline-block; }
td:nth-child(3) {
  clear:both;
}

https://jsfiddle.net/hks5d6th/2/

JavaScript的

循环遍历所有适用的列并使用模数运算符确定拆分为新行的位置.

var table = document.getElementsByTagName('table')[0],
  columns = Array.prototype.slice.call(document.getElementsByTagName('td')),
  newTable = document.createElement('table'), html;

columns.forEach(function(next, idx) {
  if (idx % 2 === 0 || idx === 0) {
    html += '<tr>' + next.outerHTML;
    return;
  }
  html += next.outerHTML + '</tr>';
});

newTable.innerHTML = html;
table.replaceWith(newTable);

https://jsfiddle.net/hks5d6th/1/

标签：javascript,css,media-queries,html
来源： https://codeday.me/bug/20190701/1351579.html