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>

---

这可能吗？如果仅仅使用CSS无法做到这一点（我假设是这样），那么JavaScript解决方案也是受欢迎的。

纯CSS

使用

float

s和

n个子项更改外观

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


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

var table=document.getElementsByTagName（'table'）[0]，
columns=Array.prototype.slice.call（document.getElementsByTagName（'td'）），
newTable=document.createElement（'table'），html；
columns.forEach（函数（next，idx）{
如果（idx%2==0 | | idx==0）{
html+=''+next.outerHTML；
返回；
}
html+=next.outerHTML+''；
});
newTable.innerHTML=html；
表.替换为（新表）；

如果您想将其作为一个表来执行，那么您必须使用JS或@Paul建议的伪元素。如果您可以使用divs，那么您可能会选择纯CSS选项。您可以使用CSS在视觉上获得相同的结果，但不应通过CSS触及物理基础表结构（假设这是可能的）-如果您无法控制生成初始表的原始代码，那么您可能需要创建一个基于脚本的“映射器”，将表“结构a”转换为“结构B”，如果您必须在DOMS中对结构进行物理更改的话。这两种方法我都读过，但我还不足以理解上面的JS：'）CSS一个很好用！只有一个问题：纯css方法是否仍然适用于奇数列（即三列）？这只是因为每行有四列。如果您希望它每三列工作一次，那么每行需要六列，那么每
n个子级（4）
就有三列行……但是您能将三列表更改为两列表吗？
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);