javascript - 表未按预期工作溢出：使用 jQuery 的自动

Question

这是我制作的表格：JSFiddle 链接

起初它运行良好，但我想在左侧添加滚动条，因为表格有很多行。为了做到这一点，我将溢出：自动设置为 CSS 中的 tbody。它没有用。然后我加了

#training_table thead, #training_table tbody {
    display:block;
}

之后它起作用了，但是正如您在链接上看到的所有行都被压缩了一样，有一个滚动条。现在我无法让它们看起来正确。我的错误是什么？

编辑：滚动时表头不应该上升。（应该始终可见）

Answer 1

display: block;从_#training_table thead, #training_table tbody

并将这些添加到#training_table,

height: 200px; // or whatever your limit is
display: table-cell;
overflow-y: scroll; //as per your preference 
overflow-x: hidden; //as per your preference

测试链接——全屏

测试链接——小提琴

Answer 2

只需对 css 进行以下更改，它将正常工作：
替换display: block;为display: block inline;