Как «развернуть» таблицу, превратив строки в столбцы?

Question

[Kotorkovsciy]

Есть таблица:

<table>
      <tr>
         <th>Стратегии</th>
         <td>Warcraft 3: The Frozen Throne</td>
         <td>Fallout: New Vegas</td>
         <td>StarCraft 2: Wings of Liberty</td>
         <td>XCOM: Enemy Unknown</td>
      </tr>
   </table>

Сейчас так:

Стратегии	Warcraft 3: The Frozen Throne	Fallout: New Vegas	StarCraft 2: Wings of Liberty	XCOM: Enemy Unknown

А надо, чтобы было так:

Стратегии

Warcraft 3: The Frozen Throne

Fallout: New Vegas

StarCraft 2: Wings of Liberty

XCOM: Enemy Unknown

Comments

[Дмитрий Перевозкин]

Обязательно таблица нужна? Не проще сделать списком через ul -> li?

[Kotorkovsciy]

Ветеран Пупков, Да, нужна именно таблица

[Евгений]

В исходной таблице только одна строка, или будет больше?

Answer 1

[0xD34F]

function transposeTable(table) {
  const headerCol = table.rows[0]?.cells[1]?.tagName === 'TH';
  const content = Array.from(
    table.rows,
    tr => Array.from(tr.cells, td => td.innerHTML)
  );

  table.innerHTML = content[0]?.map((n, i) => `
    <tr>${content.map((m, j) => (j = (headerCol ? j : i) ? 'td' : 'th', `
      <${j}>${m[i]}</${j}>`)).join('')}
    </tr>
  `).join('') ?? '';
}

или

function transposeTable(table) {
  const cells = Array
    .from(table.rows, tr => [...tr.cells])
    .reduce((acc, n) => (
      n.forEach((m, j) => (acc[j] ??= []).push(m)),
      acc
    ), []);

  Array.prototype.forEach.call(table.children, n => n.remove());
  cells.forEach(n => table.insertRow().append(...n));
}

https://jsfiddle.net/mqjna81x/

Answer 2

[Rst0]

Comments

[Kotorkovsciy]

А что если в табличке не одна строка а больше ?

[Rst0]

[Rst0]

как в вопросе - исключительно средствами js.