Scrollable tbody

我正在尋找一個如何保持固定的<thead>和可滾動的<tbody>的CSS示例。我搜索了很多例子，但都沒有工作。Scrollable tbody

我該如何讓這個簡單的桌面保持固定，並且要滾動表體。每當我嘗試在單個元素下面「擠壓」身體或不在50px高度內滾動時。

HTML：

<table id='recipient-summary'> 
    <thead class='fixed'> 
    <tr> 
     <th>Live</th> 
     <th>Paid</th> 
     <th>Dep</th> 
     <th>Tran</th> 
     <th>Date & Time</th> 
     <th>Type</th> 
     <th>Name</th> 
     <th>Total</th> 
    </tr> 
</thead> 
<tbody class='scrollable'> 
    <tr> 
    <td>Bob Dillian</td> 
    <td>Race for the stars</td> 
    <td>23 Apr 2015</td> 
    <td>$144.54</td> 
    <td>$3.99</td> 
    <td>Issue Check</td> 
    <td>Another element</td> 
    <td>Another element</td> 
    </tr> 
    <tr> 
    <td>Bob Dillian</td> 
    <td>Race for the stars</td> 
    <td>23 Apr 2015</td> 
    <td>$144.54</td> 
    <td>$3.99</td> 
    <td>Issue Check</td> 
    <td>Another element</td> 
    <td>Another element</td> 
    </tr> 
    <tr> 
    <td>Bob Dillian</td> 
    <td>Race for the stars</td> 
    <td>23 Apr 2015</td> 
    <td>$144.54</td> 
    <td>$3.99</td> 
    <td>Issue Check</td> 
    <td>Another element</td> 
    <td>Another element</td> 
    </tr> 
    <tr> 
    <td>Bob Dillian</td> 
    <td>Race for the stars</td> 
    <td>23 Apr 2015</td> 
    <td>$144.54</td> 
    <td>$3.99</td> 
    <td>Issue Check</td> 
    <td>Another element</td> 
    <td>Another element</td> 
    </tr> 
    <tr> 
    <td>Bob Dillian</td> 
    <td>Race for the stars</td> 
    <td>23 Apr 2015</td> 
    <td>$144.54</td> 
    <td>$3.99</td> 
    <td>Issue Check</td> 
    <td>Another element</td> 
    <td>Another element</td> 
    </tr> 
</tbody> 
<tfoot></tfoot> 
</table>

CSS：

thead,tbody{ display:block; } 
tbody{ height:50px; overflow:auto; } 
td{ border:1px solid #777; padding:5px; }

來源

2014-03-27 William Hagan

你必須檢查這個URL。 http://www.imaputz.com/cssStuff/bigFourVersion.html –

它很糟糕，但訣竅是你必須在每個表格的列上設置明確的寬度（'td：nth-child（k）'和'th ：nth-child（k）'） –

這裏有很多討論的類似問題http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody may help你 –

這個怎麼樣，雖然我只在IE和FF測試這一點。我遇到的唯一問題是TH單元需要設置絕對寬度，但TBODY不需要。

<html> 
<head> 
    <style> 
     .scrollable-table 
     { 
      height: 150px; 
      margin-top: 50px; 
      overflow: auto; 
     } 
     .scrollable-table table 
     { 
      border-collapse: collapse; 
      width: 100%; 
     } 
     .scrollable-table thead 
     { 
      height: 50px; 
      left: 0; 
      position: absolute; 
      top: 0; 
      width: 100%; 
     } 
     .scrollable-table thead th 
     { 
      height: 50px; 
     } 
     .scrollable-table tbody 
     { 

     } 
     .scrollable-table tbody td 
     { 
      border-bottom: 1px solid #999; 
      height: 100px; 
     } 
    </style> 
</head> 
<body> 
    <div class="scrollable-table"> 
     <table> 
      <thead> 
       <tr> 
        <th>Live</th> 
        <th>Paid</th> 
        <th>Dep</th> 
        <th>Tran</th> 
        <th>Date & Time</th> 
        <th>Type</th> 
        <th>Name</th> 
        <th>Total</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Bob Dillian</td> 
        <td>Race for the stars</td> 
        <td>23 Apr 2015</td> 
        <td>$144.54</td> 
        <td>$3.99</td> 
        <td>Issue Check</td> 
        <td>Another element</td> 
        <td>Another element</td> 
       </tr> 
       <tr> 
        <td>Bob Dillian</td> 
        <td>Race for the stars</td> 
        <td>23 Apr 2015</td> 
        <td>$144.54</td> 
        <td>$3.99</td> 
        <td>Issue Check</td> 
        <td>Another element</td> 
        <td>Another element</td> 
       </tr> 
       <tr> 
        <td>Bob Dillian</td> 
        <td>Race for the stars</td> 
        <td>23 Apr 2015</td> 
        <td>$144.54</td> 
        <td>$3.99</td> 
        <td>Issue Check</td> 
        <td>Another element</td> 
        <td>Another element</td> 
       </tr> 
       <tr> 
        <td>Bob Dillian</td> 
        <td>Race for the stars</td> 
        <td>23 Apr 2015</td> 
        <td>$144.54</td> 
        <td>$3.99</td> 
        <td>Issue Check</td> 
        <td>Another element</td> 
        <td>Another element</td> 
       </tr> 
       <tr> 
        <td>Bob Dillian</td> 
        <td>Race for the stars</td> 
        <td>23 Apr 2015</td> 
        <td>$144.54</td> 
        <td>$3.99</td> 
        <td>Issue Check</td> 
        <td>Another element</td> 
        <td>Another element</td> 
       </tr> 
      </tbody> 
      <tfoot></tfoot> 
     </table> 
    </div> 
</body> 
</html>

來源

2014-03-31 13:01:10 user2754435

回答

相關問題