垂直滾動內部tbody的HTML表格

我想要一個固定標題的tbody內的垂直滾動條。我嘗試了鏈接中提供的解決方案。垂直滾動內部tbody的HTML表格

HTML table with 100% width, with vertical scroll inside tbody

table { 
width: 100%; 
border-spacing: 0; 
} 

thead, tbody, tr, th, td { display: block; } 

thead tr { 
/* fallback */ 
width: 97%; 
/* minus scroll bar width */ 
width: -webkit-calc(100% - 16px); 
width: -moz-calc(100% - 16px); 
width:   calc(100% - 16px); 
} 

tr:after { /* clearing float */ 
content: ' '; 
display: block; 
visibility: hidden; 
clear: both; 
} 

tbody { 
height: 100px; 
overflow-y: auto; 
overflow-x: hidden; 
} 

tbody td, thead th { 
width: 19%; /* 19% is less than (100%/5 cols) = 20% */ 
float: left; 
}

如果滾動條appears.But如果行很少，滾動欄沒有顯示它工作正常，那麼THEAD沒有與TBODY對齊。我怎樣才能解決這個問題與CSS？

來源

2016-06-28 Nagendra

可以插入在後一個的jsfiddle？ –

這是因爲上述CSS降低thead tr的寬度的寬度，以97％或（100％ - 滾動條的寬度）以容納用於TBODY的寬度減少因爲只有tbody的滾動條。如果在tbody中沒有滾動條，那麼這個tbody仍然完全是100％寬，但是它仍然在縮小。

您希望修復的是CSS，而且CSS無法識別滾動條沒有足夠的行顯示的事實。不過，您可以使用JavaScript修復它 - 只要看看您引用的答案，就可以使用JavaScript將tbody列的寬度應用到剛纔在答案開頭的tad列。

編輯

或武力在任何時候都垂直滾動條，使得TBODY的寬度不會改變，無論該行數： Force Vertical Scrollbar

：

tbody { 
    # ... other attributes 
    overflow-y: scroll; 
}

取自

來源

2016-06-28 12:08:31

謝謝。我試過jquery解決方案，只要它工作正常 – Nagendra

一旦你的tbody數據從指定的高度移出，你的y軸被激活。

tbody { 
     height: 50px; 
     display: inline-block; 
     width: 100%; 
     overflow-y:scroll; 
    }

來源

2016-06-28 12:17:19 frnt

使用tbodymax-height:100px，而不是height:100px

tbody { 
    max-height: 100px; 
    overflow-y: auto; 
    overflow-x: hidden; 
}

來源

2016-06-28 12:17:49 Mani

垂直滾動內部tbody的HTML表格

回答

相關問題