带有额外全宽度列的HTML表行

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (34)

我有一个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的sortableAPI,允许拖动/删除行,以便对它们进行排序。此外,最终结果将被打印出来。

我如何做到这一点,而不混淆我的标记与非法的div或完全放弃html表?

提问于
用户回答回答于

可以使用css。flexbox属性实现所尝试的内容,请为要跨越宽度的特定行使用类选择器。

Flexbox有财产flex-direction,让我们定义组件的子级流到以下任何一个columnrow

用户回答回答于

可以使用colspan属性:

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

将5替换为表中的列数。我还没有确认jQueryUI可以实现这个功能,但是测试它的速度很快。

扫码关注云+社区

领取腾讯云代金券