固定式Tabe头，带有可滚动的桌子主体

Question

我必须使用滚动条使此表内容（正文）和表的高度固定。为了启用滚动，我添加了样式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 */
}