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
例; Link to a codepen demo

诗;我没有在jguery UI上测试它。

Answer 2

您可以使用colspan属性：

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

将5替换为表中的列数。我还没有确认这适用于jQuery UI，但它很快就可以测试它。

带有额外全角列的HTML表格行

2 个答案: