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

Question

我需要为tbody设置滚动，如果记录数会更多，那么我使用滚动条查看记录。 为此，我使用了表格的tbody的垂直滚动条。在那种情况下，滚动条正常工作，所有列值（tbody）都在第一列下。 如何解决这个问题？在此示例中，我已经使用的CSS TBODY

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

Answer 1

添加这在你的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; 
} 

更新爵士小提琴 https://jsfiddle.net/vinothsm92/pL1wqaj1/12/

Answer 2

从你的CSS

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

Answer 3

检查这个删除一行：

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

，并删除

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