Реструктурировать столы с медиазапросы

Question

У меня есть таблица с четырьмя колоннами и двумя рядами следующим образом:

<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 запроса, такие как @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.

Answer 1

Pure CSS

Изменение внешнего вида с помощью float с и 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/