如何在 HTML 表格中获取可滚动的 tbody 部分？

Question

我在尝试使 HTML 表格的 tbody 部分可滚动时遇到以下问题。

例如，我有这个简单的 HTML 表格：

<table border="1" class="scrollableTable">
    <thead>
        <tr>
            <th width="14.2%">Codice RM</th>
            <th width="14.2%">Autore Firma</th>
            <th width="14.2%">Data Firma</th>
            <th width="14.2%">Acq Riserva</th>
            <th width="14.2%">Consegna Finale</th>
            <th width="14.2%">Descrizione RM</th>
            <th width="14.2%">Imponibile</th>
         </tr>
     </thead>

     <tbody>
         <tr class="even" id="rmRow">
             <td width="14.2%">0001</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">00000000</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">19/09</td>
             <td width="14.2%">57.0</td>
          </tr>

         <tr class="even" id="rmRow">
             <td width="14.2%">0002</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">00000000</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">19/09</td>
             <td width="14.2%">57.0</td>
         </tr>

         <tr class="even" id="rmRow">
             <td width="14.2%">0003</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">00000000</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">19/09</td>
             <td width="14.2%">57.0</td>
          </tr>

         <tr class="even" id="rmRow">
             <td width="14.2%">0004</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">00000000</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">19/09</td>
             <td width="14.2%">57.0</td>
         </tr>

         <tr class="even" id="rmRow">
             <td width="14.2%">0005</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">00000000</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">19/09</td>
             <td width="14.2%">57.0</td>
          </tr>

         <tr class="even" id="rmRow">
             <td width="14.2%">0006</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">00000000</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">bla</td>
             <td width="14.2%">19/09</td>
             <td width="14.2%">57.0</td>
          </tr>

       </tbody>
</table>

您可以在 tbody 部分看到一些行。这些行可能很多，所以我希望这个部分有一个特定的高度并且它是可滚动的（这样我可以看到所有的行）。

所以我尝试添加这些 CSS 设置：

1. 首先我将 tbody 部分设置为一个块，以便我可以为其设置高度。

2. 然后我为 tbody 部分设置一个高度。

3. 最后，我将垂直溢出设置为滚动，以使我的 tbody 部分可滚动。

这是我的 CSS 代码：

tbody {
    display: block;
    height: 100px;
    overflow-y: scroll;
}

但这是我得到的：

JSFiddle 链接：http://jsfiddle.net/AndreaNobili/4v1xnwzo/2/

HTML 结果：http://jsfiddle.net/AndreaNobili/4v1xnwzo/2/embedded/result/

如您所见，最终结果非常糟糕，并且 tbody 列 与 thead 列 不匹配。

为什么？我错过了什么？我该如何解决这个问题？

Tnx

Answer 1

tbody 中的单元格只会与 thead 中的单元格对齐（如果它有 display: table-row-group;）。因此我们无法在tbody 上设置高度，所以我们必须找到一种解决方法。

table 本身可以有overflow-y: scroll;，这使我们可以滚动tbody 中的行，但不幸的是还包括滚动thead。您可以通过固定定位thead 来避免这种行为。并稍微调整其显示方式，使其在表格顶部看起来是静态的，而表格的其余部分则滚动。

我有 updated your JSFiddle 和下面的 css：

tbody {
    margin-top: 40px;
}

table {
    display: block;
    height: 100px;
    overflow-y: scroll;
    position: relative;
    margin-top: 50px;
}
thead {
    background: white;
    position: fixed;
    top: 0;
    margin-right: 25px;
    display: table-row-group;
}
th, td {
    width: 80px;
}