<div class="modal-body">
<div class="table-responsive">
<table id="table">
<thead>
<tr>
<th>...</th>
...
</tr>
<thead>
<tbody>
<tr>
<td>...</td>
...
</tr>
<thead>
</table>
</div>
</div>
我想根据行数调整表格的高度。我想使用一些数字 (N px) 来限制高度,但如果行数较少(填充少于 N px),则表格应该更低。我尝试设置最大高度但没有成功(当时框是空的)。
编辑: 我试过了: fiddle
最佳答案
只需将高度添加到 tr
,这样表格就可以乘以 tr
,我也将你的 id="table"
更改为 class="mytable"
只是为了展示这个例子。
tr {
height: 50px;
}
table *{
border: 1px solid green;
box-sizing: border-box;
}
.table-responsive{
display: inline-block;
max-height: 150px;
overflow: auto;
}
<div class="modal-body">
<div class="table-responsive">
<table class="mytable">
<thead>
<tr>
<th>tr here 111111</th>
<th>tr here 222222</th>
</tr>
</thead>
<tbody>
<tr>
<th>tr here 22222</th>
<td>td here 22222</td>
</tr>
<tr>
<th>tr here 33333</th>
<td>td here 33333</td>
</tr>
<tr>
<th>tr here 44444</th>
<td>td here 44444</td>
</tr>
<tr>
<th>tr here 55555</th>
<td>td here 55555</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr>
<div class="modal-body">
<div class="table-responsive">
<table class="mytable">
<thead>
<tr>
<th>tr here 111111</th>
<th>tr here 222222</th>
</tr>
</thead>
<tbody>
<tr>
<th>tr here 22222</th>
<td>td here 22222</td>
</tr>
</tbody>
</table>
</div>
</div>
关于HTML,CSS : Adjustment height of the table to the number of rows,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44271192/