Is there a way to create a table with a fixed height and a scroll bar for the content, while still allowing the table width to adjust accordingly? I've tried using display: block, but it seems to freeze the width of the table. Any suggestions on how to make the table width full?
https://i.sstatic.net/FEsgh.jpg
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;
}