垂直滾動條在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 
}