頁眉和頁腳內部的可滾動表體

我試圖在頁面上創建一個小部件，該頁面是一個帶有thead，tbody和tfoot的表格。因爲我不希望小部件變得太大，所以如果tbody的長度大於200px，我希望表格中的行可以滾動。頁眉和頁腳內部的可滾動表體

我正在使用jQuery 1.9.1，但我更喜歡純粹的CSS/HTML解決方案，如果這是可能的。

有沒有人有一個非常簡單的解決方案呢？

2013-04-08 Luke Sapan

你會使用溢出的CSS聲明。

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 
<div id="wrapper" style="height:100px;width:100px;overflow:auto;"> 
<div id="widget"> 

<table> 
<tbody> 
    <tr> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
    </tr> 
    <tr> 
     <td>more blah</td> 
     <td>etc</td> 
     <td>etc</td> 
     <td>etc</td> 
     <td>etc</td> 
     <td>etc</td>  
    </tr> 
    <tr> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
     <td>blah</td> 
    </tr> 
</tbody> 
</table> 

</div> 


</div> 




</body> 
</html>

來源

2013-04-08 01:13:45

問題是我只想要表格（「tbody」）的內容滾動。桌子的頁眉和頁腳（「thead」和「tfoot」）應該保持在原位。 – 2013-04-08 01:32:16

你可以添加相同的聲明，包括tbody也是:) – 2013-04-08 01:41:59

我試過這個css： table.scheduleWidget tbody { \t width：250px; \t height：30px; \t溢出：auto; } 但奇怪的是它根本沒有做任何事情。 :( – 2013-04-08 01:43:55

頁眉和頁腳內部的可滾動表體

回答

相關問題