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设置：

首先我将 tbody 部分设置为一个块，以便我可以设置它的高度。
然后我将高度设置为 tbody 部分。
最后，我将verical overflow设置为滚动，以便滚动我的 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;
}

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

1 个答案: