HTML table 行带有额外的全宽列

Question

我有一个 HTML table 有很多行和几列。我想将 td 附加到其中一些行，这样 td 看起来像一个新行并跨越 table 的整个宽度。这有助于将单个 table 行的所有数据保留在相同的 tr 标记下，并允许我显示与同一行相关但不适合单个数据的额外数据table 列，如长篇笔记。例如：

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

注意同样的table也使用jquery-ui的sortableapi让行成为drag/dropped以便对它们进行排序。此外，然后打印最终结果。

我如何做到这一点而不用非法 div 弄乱我的标记或完全放弃 html tables？

Answer 1

您可以为此使用 colspan 属性：

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

将 5 替换为 table 中的列数。我还没有确认这适用于 jQuery UI，但测试起来很快。

Answer 2

您可以使用 CSS flexbox 属性来实现您正在尝试的效果，对您想要跨越宽度的特定行使用 class 选择器。
Flexbox 有一个属性 flex-direction 让我们定义一个组件的子流到 column 或 row
例子; Link to a codepen demo

Ps；我还没有在 jguery UI.

上测试过它

HTML table 行带有额外的全宽列

HTML table row with extra full-width column

html

css

jquery-ui

html-table

jquery-ui-sortable