带有可滚动表体的固定表头

Question

我必须用滚动条制作这个表格内容（tbody），表格的高度是固定的。为了启用滚动，我添加了样式display: block。之后，表格的宽度被冻结且不可调整。给我找个办法让表格的宽度变满。

HTML：

   <table class="table table-striped table-hover" id="item_table">
       <thead>
        <tr class="bg-primary">
         <th>#</th>
          <th>Product Name</th>
          <th>Quantity</th>
          <th>Unit Price</th>
          <th>Discount</th>
          <th>Amount</th>
          <th><i class="fa fa-close"></i></th>
         </tr>
   </thead>
   <tbody id="item_list">
     <tr>
       <td>1</td>
       <td>Mens Full Sleeve Shirts</td>
       <td>1</td>
       <td>2200.00</td>
       <td>200.00</td>
       <td>2000.00</td>
       <td><span><i class="fa fa-trash"></i></span></td>
     </tr>
   </tbody>
</table>

CSS：

#item_table{
    display: table-row;
    table-layout:fixed;
}

#item_list{
    width: 100%;
    display: block;
    table-layout:fixed;
    height: 170px;
    overflow-y: scroll;
}

Answer 1

不要将display:block 添加到表中。它会毁掉它。

将表格 Insteed 包装成 div 并将 overflow:auto 添加到此元素。

或者，如果使用引导程序，请将 table-responsive 类添加到容器中，如您在文档 here 中看到的那样

Answer 2

嗨，请试试这个：

tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}