Фиксированная головка табе с прокручиваемым корпусом стола

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 к этому элементу.

Или, если используете bootstrap, добавьте в контейнер класс table-responsive как вы можете видеть в документации здесь

Answer 2

Привет Пожалуйста, попробуйте это:

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