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

回答

相关问题