带有额外全角列的 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>

请注意，同一个表还使用 jquery-ui 的

sortable

api 来允许拖放行以对其进行排序。另外，最终结果也会被打印出来。

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

Answer 1

您可以使用 CSS

flexbox

属性来实现您正在尝试的功能，对您想要跨越宽度的特定行使用类选择器。

Flexbox

有一个属性

flex-direction

，让我们将组件的子组件的流程定义为

column

或

row

示例：codepen 演示链接

PS：我还没有在 jQuery UI 上测试过它。

Answer 2

您可以使用

colspan

属性来实现此目的：

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

将 5 替换为表中的列数。我尚未确认这适用于 jQuery UI，但测试它很快。