Строка таблицы HTML с дополнительным столбцом полной ширины

Question

У меня есть HTML-таблица со многими строками и несколькими столбцами. Я хочу добавить td к некоторым из этих строк, так что td будет выглядеть как новая строка и будет занимать всю ширину таблицы. Это полезно для хранения всех данных для одной строки таблицы под одним и тем же tr тег и позволил бы мне показать дополнительные данные, которые относятся к той же строке, но которые не помещаются в один столбец таблицы, как примечания в форме. Например:

<table>
  <thead>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </thead>
  <tbody>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
      <td class="magic" colspan="3">
        This is long-form data that should look like a full-width
        row without creating an extra tr tag to hold it.
      </td>
    </tr>
  </tbody>
</table>

Обратите внимание, что в той же таблице также используются jquery-ui sortable API, позволяющий перетаскивать строки для их сортировки. Кроме того, конечный результат затем печатается.

Как мне сделать это, не перепутав мою разметку с нелегальными div ами или вообще не отказываясь от таблиц html?

Answer 1

Вы можете использовать CSS flexbox Свойство, чтобы достичь того, что вы пытаетесь, используйте селектор класса для конкретной строки, которую вы хотите охватить шириной.
Flexbox имеет свойство flex-direction который давайте определим поток потомков компонента либо column или же row
Пример; Ссылка на демонстрационный код

Ps; Я не проверял это на пользовательском интерфейсе jguery.

Answer 2

Вы можете использовать colspan атрибут для этого:

<tr>
  <th colspan="5">Full-Width Row</th>
</tr>

Замените 5 на количество столбцов в таблице. Я не подтвердил, что это работает с jQuery UI, но это довольно быстро проверить.