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

我在尝试使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>

但我得到的是：

jsiddle链接：

HTML结果：

如您所见，最终结果非常糟糕，t正文列与thead列不匹配

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

---

Tnx

如果

显示：表格行组，则
t正文中的单元格将仅与
thead
中的单元格对齐。因此，我们无法在
t车身上设置高度，因此我们必须找到解决办法

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

我已经使用了以下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;
}

我试着弄乱了你的代码，但还是弄不明白。可以用两张桌子吗。一个是固定的，另一个是像这样溢出的？@AndrewH我知道这个解决方案。我想问的是，是否存在一个只使用一个表的更优雅的解决方案？是否有可能计算出适当的td宽度。看看这个
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;
}