Question

我正在寻找一个仅限CSS的例子，说明如何保持<thead>固定和<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; }

Answer 1

这个怎么样，虽然我只在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>

可滚动的tbody

1 个答案: