是否可以将 th 与 display flex 和 colspan 一起使用？答案

【问题标题】：Is it possible to use a th with a display flex and a colspan?是否可以将 th 与 display flex 和 colspan 一起使用？
【发布时间】：2017-10-23 20:59:48
【问题描述】：

我有以下简化的代码笔：https://codepen.io/anon/pen/LzoNNm

基本上，我有这个：

.flex {
  display: flex;
  flex-direction: row
}

<table>
  <thead>
    <tr>
      <th class="flex" colspan="3">This should stretch</th>
    </tr>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
    </tr>

  </thead>
</table>

第一个th 没有拉伸到全宽，而是似乎与下一行中的col 1 具有相同的宽度。为什么第一个th 不占全角？

【问题讨论】：

我假设将其设置为 display: flex 会导致 colspan 不再被应用（因为 colspan 是特定于表格单元格的，并且您告诉它不要像表格单元格一样工作）。你想实现什么，你可以在单元格内添加一个 flex 吗？
既然colspan已经拉伸th越过th的下一行，你需要display: flex做什么

标签： html css html-table flexbox

【解决方案1】：

不，很遗憾，这是不可能的。当您更改表格任何部分的display 时，您实际上将其从表格结构中移除（就好像它是一个div 元素而不是它）并且表格布局算法开始使用anonymous table elements"魔术”以将此元素放入损坏的表结构中。在您的情况下，由于 td 不再是表格单元格，浏览器必须用匿名表格单元格包装它，它不能有任何非默认样式或属性，因此它表现为单个非跨单元格.

【讨论】：