Атрибут Rowspan не работает на перевернутой таблице

Question

Обратите внимание, что 'инвертированный' означает, что <tr> теперь представляет столбец.

Я перевернул таблицу HTML, используя этот код CSS (который я нашел в интернете):

table {
  border-collapse: collapse;
}

tr {
  display: block;
  float: left;
}

th,
td {
  display: block;
  border: 1px solid black;
}

<table>
  <tr>
    <th>name</th>
    <th>id</th>
    <th>number</th>
  </tr>
  <tr>
    <td>James Bond</td>
    <td rowspan="2">1</td>
    <td>007</td>
  </tr>
  <tr>
    <td>Lucipher</td>
    <td>6</td>
    <td>666</td>
  </tr>
</table>

Код CSS успешно перевернул таблицу, проблема возникает, когда я пытаюсь использовать rowspan или colspan, она не работает. Как я могу это исправить?

Answer 1

Преобразуя вашу таблицу в блоки, она больше не является таблицей. Я не верю, что вы сможете делать то, что вы просите, с этим набором правил CSS, потому что rowspan и colspan являются свойствами таблицы.

Лучшее решение - написать таблицу по-другому. HTML позволяет писать таблицы с заголовками по сторонам, как это:

<table>
  <tr>
    <th>name</th>
    <td>James Bond</td>
    <td>Lucipher</td>
  </tr>
  <tr>
    <th>id</th>
    <td colspan="2">1</td>
    <td>6</td>
  </tr>
  <tr>
    <th>number</th>
    <td>007</td>
    <td>666</td>
  </tr>
</table>

Если проблема связана с запросом SQL, который необходимо перевернуть, вы можете вывести свои данные в матрицу значений, затем отобразить их вбок, или, в некоторых случаях, есть способы изменить запрос, чтобы сделать это, но эти решения могут быть довольно запутанными в зависимости от сложности ваших данных.