我必须使用滚动条使此表内容(正文)和表的高度固定。为了启用滚动,我添加了样式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;
}
答案 0 :(得分:2)
不要将display:block
添加到表中。它将摧毁它。
将Insteed表包装到div
中,并将overflow:auto
添加到此元素。
或者,如果使用引导程序,则将类table-responsive
添加到容器中,如在文档here中所见
答案 1 :(得分:0)
嗨,请尝试以下操作:
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}