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

Question

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

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

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

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

Answer 1

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

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

Answer 2

Для этого можно использовать атрибут colspan:

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

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