没有固定宽度的 Tbody 垂直滚动条

Question

正如标题所说。这个问题有数百个帖子，所有答案都迫使我使用固定宽度，但这不是现实世界。

我希望我的td 使用% 并且仍然有tbody 可滚动。

我想要 Isaac Betesh 在comment 上对这个问题“How to apply vertical scrollbar for TBODY”提出的问题“How to apply vertical scrollbar for TBODY”：

此示例具有每个 td 和 th 的精确像素宽度。有没有办法使用 % 宽度而不是 px 并完成相同的操作？

编辑： 不想包含几十个例子，因为它们都在 Stack Overflow，但这是经典的例子：JSFiddle。

如果您只是像这样更改thead 中的内容：JSFiddle，那么thead 和tbody 之间的所有内容都会不同步。

解决办法

 display:block;

没用。

Answer 1

添加到tbody的滚动条是问题，我将thead宽度设置为width: calc(100% - 17px)和其他一些css并解决了问题， 这是working example 这就是我添加到您的 css 中的内容：

thead, tbody, tr, td { display: block}
thead {
        width: calc(100% - 17px);
}
tbody td, thead td {
    width: 40%;
    display:inline-block
}
table {
    background-color: #aaa;
    width:50%
}