我想在我的网站上有一张桌子。问题是这个表大约有400行。如何限制表格的高度,并对其应用滚动条?这是我的代码:
<div class="span3">
<h2>Achievements left</h2>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Something</td>
</tr>
<tr>
<td>2</td>
<td>Something</td>
</tr>
<tr>
<td>3</td>
<td>Something</td>
</tr>
<tr>
<td>4</td>
<td>Something</td>
</tr>
<tr>
<td>5</td>
<td>Something</td>
</tr>
<tr>
<td>6</td>
<td>Something</td>
</tr>
</tbody>
</table>
<p><a class="btn" href="#">View details »</a></p>
</div>
我尝试将最大高度和固定高度应用于表,但它不起作用。
发布于 2012-05-03 03:15:41
表元素似乎不直接支持这一点。将表格放在div中,设置div的高度并设置overflow: auto
。
发布于 2012-05-03 03:19:35
.span3 {
height: 100px !important;
overflow: scroll;
}
您可能希望将它包装在它自己的div中,或者给span3一个它自己的id,这样就不会影响整个布局。
这里有一个小把戏:http://jsfiddle.net/zm6rf/
发布于 2013-08-31 00:50:45
我遇到了同样的问题,并使用了上述解决方案的组合(并添加了我自己的解决方案)。请注意,我必须指定列宽,以保持标题和正文之间的宽度一致。
在我的解决方案中,页眉和页脚保持不变,而正文滚动。
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th width="25%">First Name</th>
<th width="13%">Last Name</th>
<th width="25%" class="text-center">Address</th>
<th width="25%" class="text-center">City</th>
<th width="4%" class="text-center">State</th>
<th width="8%" class="text-center">Zip</th>
</tr>
</thead>
</table>
<div class="bodycontainer scrollable">
<table class="table table-hover table-striped table-condensed table-scrollable">
<tbody>
<!-- add rows here, specifying same widths as in header, at least on one row -->
</tbody>
</table>
</div>
<table class="table table-hover table-striped table-condensed">
<tfoot>
<!-- add your footer here... -->
</tfoot>
</table>
</div>
然后应用了下面的CSS:
.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }
我希望这对其他人有帮助。
https://stackoverflow.com/questions/10420168
复制相似问题