垂直滚动条在 html 表格中无法正常工作答案

【问题标题】：Vertical scrollbar is not working properly in html table垂直滚动条在 html 表格中无法正常工作
【发布时间】：2017-04-07 12:20:45
【问题描述】：

如果记录数超过我使用滚动条查看记录的时间，我需要为 tbody 设置滚动。为此，我为表格的 tbody 使用了垂直滚动条。在这种情况下，滚动条工作正常，所有列值（tbody）位于第 1 列之下。如何解决这一问题？在这个示例中，我将 css 用于 tbody

tbody {
    height: calc(100vh - 340px);
    display: block;
    width: 100%;
    overflow-y: auto;
}

【问题讨论】：

标签： html css

【解决方案1】：

从你的 CSS 中删除一行

tbody {
    height: 100%;
    display: block;//<--- Remove this line
    width: 100%;
    overflow-y: auto;
}

【讨论】：

正如你所说，我删除了 css 行。但它不起作用
这很奇怪......，我只是在你的小提琴中做了。它在那里工作。
:@Vky: 滚动条在这里不可见。
嗨 Vky，我使用了你提到的 tbody 样式。但是它没有显示滚动条
现在检查这张图片我也尝试过我本地的代码，滚动条也显示得很好ibb.co/dcN3vk@M.Nithya

【解决方案2】：

将此添加到您的 css 类中。这会起作用。

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
      height: calc(100vh - 360px);
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
thead {
    width: calc( 100% - 1em )
}
table {
    width:400px;
}

更新的 js 小提琴 https://jsfiddle.net/vinothsm92/pL1wqaj1/12/

【讨论】：

【解决方案3】：

检查一下：

tbody {
    position: absolute;
    width: 100%;
    height: 400px;
    overflow: hidden;
    overflow-y: scroll;
}

并删除

.scrollbar {
    height: 450px;
    overflow-y: auto; // Remove this line
}

【讨论】：