包含额外全宽列的HTML表格行
包含额外全宽列的HTML表格行
提问于 2018-06-05 06:43:24
我有一个包含多行和多列的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 ui来允许对行进行拖放，以便对它们进行排序。此外，还会打印最终结果。
我如何做到这一点，而不搞乱我的标记与非法的div或完全放弃html表？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-05 07:07:35
你可以使用CSS的flexbox属性来实现你正在尝试的效果，使用一个类选择器来选择你想要跨越宽度的特定行。
Flexbox有一个属性flex-direction，让我们定义组件的子级到column或row的流
我还没有在jguery UI上测试过它。
Stack Overflow用户
发布于 2018-06-05 06:48:25
您可以使用colspan属性来执行以下操作：
<tr>
<th colspan="5">Full-Width Row</th>
</tr>将5替换为表中的列数。我还没有确认这是否适用于jQuery UI，但它很快就能测试出来。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50689750
复制相关文章
相似问题