html - 为什么当我尝试在 html 表格的 tbody 上设置高度和垂直滚动时出现此问题？

Question

我发现通过滚动向该内表的 tbody 添加高度有一些困难:

正如您在我的页面中看到的那样，我有一个 Jquery Accordion 菜单(我认为这不是问题)，其中包含一个内部表格(以红色方 block 突出显示)。

这是我的表的代码:

<div>
    <table border="1" class="standard-table-cls" style="width: 70%; float: right;">

        <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>
             <%
                 int count = 0;
                 for (RM currentRM : salDettaglio.getRM()) {
                     String test = currentRM.getAcqRiserva();
                     String evenOrOdd;
                     if((count & 1) == 0) {
                         evenOrOdd = "even";
                     }
                     else {
                         evenOrOdd = "odd";
                     }
                     count++;
                  %>

                  <tr id="rmRow" class=<%=evenOrOdd %> >
                      <td><%=currentRM.getCodiceRm()%></td>
                      <td><%=currentRM.getAutoreFirma()%></td>
                      <td><%=currentRM.getDataFirma()%></td>
                      <td><%=currentRM.getAcqRiserva()%></td>
                      <td><%=currentRM.getConsegnaFinale()%></td>
                      <td><%=currentRM.getDescrizioneRM()%></td>
                      <td><%=currentRM.getImponibile().toString()%></td>
                  </tr>

               <%}%>
           </tbody>
       </table>
   </div>

这是与此表相关的 CSS:

table.standard-table-cls {
    border: 1px solid #76818a;
    border-collapse: collapse;
    color: #76818a;
    font: 11px Verdana,Geneva,Arial,Helvetica,sans-serif;
    margin: 0 !important;
    table-layout: fixed;
    text-align: center;
    text-decoration: none;
}

table.standard-table-cls th {
    border-bottom: 1px solid #76818a;
    border-left: 1px solid #76818a;
    color: #76818a;
    font-weight: bold;
    overflow: hidden;
    padding: 2px 14px 2px 4px !important;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

table.standard-table-cls tr.even {
    background-color: #fffece;
}

table.standard-table-cls tr.odd {
    background-color: #ffffff;
}

好的，现在的问题是我想向 tbody 添加一个 height 并滚动到它(如果内容超出高度。

所以我添加了以下 CSS(我将 tbody 设置为 block 这样我就可以固定它的高度并将溢出设置为滚动 y):

.standard-table-cls > tbody {
    display: block;
    height: 45px;
    overflow-y: scroll;
}

我得到了这个悲惨的结果:

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

谢谢

Answer 1

您是否尝试过最大高度和最小宽度？