为什么冻结行标题时td不填充父tr？

Question

这是fiddle突出我的问题。

问题

我想使每行的第一个单元格始终可见，因为我的表可以有很多列。为此，向表的父级添加边距，然后使用以下命令更改第一个位置：

.frozen-cnt th{
  position: absolute;
  left: 5px;
  top: auto;
  width: 3em;
}

问题在于，当列数很少时，tr不会完全填充。

我们通常不应该看到任何蓝色。我们如何才能使tr始终填满表格？

尝试：

我虽然是因为引导，所以我把它放在小提琴中，问题仍然存在。 我也尝试过：

.table{
  border-collapse: collapse;
  border-spacing: 0;
}

简化示例：

这是问题的简化版本，fiddle中有更完整的版本

<div class="frozen-cnt">
<table>
<tbody>
  <tr>
  <th>th!</th>
  <td>td1</td>
  </tr>
  <tr>
  <th>th!</th>
  <td>td1</td>
  </tr>
</tbody>
</table>
</div>

table{
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
}
tr{
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  background-color:blue;
}
td,th{
  border-left: 1px solid black;
  border-right: 1px solid black;
  background-color:yellow;
}
.frozen-cnt th{
  width: 3em;
  position: absolute;
  left: 5px;
  top: auto;
}

.frozen-cnt{
  margin-left:3em;
  width: calc( 300px - 3em );
}
div{
  width: 300px;
  overflow-x:scroll;
  overflow-y:visible;
}

Answer 1

我在Chrome和Firefox中测试了您的代码。 Chrome浏览器没有问题，但Firefox没有问题。我将此添加到您的CSS：

.frozen-cnt td {
    width: 100%;
}

这里是有效的fiddle（即使在IE中也是如此）。

Answer 2

tl; dr

.frozen-cnt tr {
    display:flex;
    flex-direction: row;
}
.frozen-cnt tr>* {
    flex:auto;
}

长回复

感谢N'Bayramberdiyev的答复，它使我得以解决。设置为100％是可行的，但是会导致td超过1吨的不平衡色谱柱。通过您的答复，我知道该行的显示被th的位置打断了。因此，我强制将tr的显示灵活地排成一行，并平衡所有td之间的空间。

小提琴here

P.S：未经IE测试