Question

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

基本上，我有这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

第一个th不会拉伸到最大宽度，而是在下一行中采用与col 1相同的宽度。为什么第一个th没有占据全宽？

Answer 1

不，不幸的是，这是不可能的。当您更改表的任何部分的display时，您实际上将其从表结构中取出（就好像它是div元素而不是它）并且表布局算法开始使用anonymous table elements“魔法”使这个元素适合破碎的表格结构。在您的情况下，由于td不再是表格单元格，浏览器必须使用匿名表格单元格来包装它，该表格单元格不能包含任何非默认样式或属性，因此它表现为单个非跨越细胞。

是否可以使用带有显示器flex和colspan的th？

1 个答案: