在表头<th>元素上使用挠性盒
在表头<th>元素上使用挠性盒
提问于 2019-06-20 11:42:28
我有一个场景，需要在表头<th>元素中进行复杂的布局。我想通过使<th>元素成为一个flex容器来解决这个问题。
但是，如果我从这个最小的例子开始
并将<th>元素更改为display: inline-flex，表如下：
也就是说，标头的列宽度不再与<td>元素的列宽匹配。
如何在不破坏列呈现的情况下使用标头内的挠曲盒？
编辑以澄清用例：我的<th>元素最终将包含多个元素，使用left+right对齐(类似于这个问题)。此外，我希望能够控制拉伸行为(这就是为什么柔性盒而不是仅仅浮动)。
示例小提琴
<table>
<thead>
<tr>
<th class="column-header">A</th>
<th class="column-header">B</th>
<th class="column-header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
</tbody>
</table>table, th, td {
border: 1px solid #000;
}
.column-header {
display: inline-flex;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-20 12:05:57
我的元素最终将包含多个元素，使用left+right对齐。此外，我希望能够控制拉伸行为(这就是为什么柔性盒而不是仅仅浮动)。
在这种情况下，您需要在每个div中使用一个th并对其进行灵活处理。
table,
th,
td {
border: 1px solid #000;
}
.column-header div {
display: flex;
justify-content: space-between;
}<table>
<thead>
<tr>
<th class="column-header">
<div><span>A</span><span>A</span></div>
</th>
<th class="column-header">
<div><span>B</span><span>B</span></div>
</th>
<th class="column-header">
<div><span>C</span><span>C</span></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
</tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56685222
复制相关文章
相似问题
腾讯云开发者
