我正在尝试使用bootstrap 3表创建一个具有固定标头和可滚动内容的表.不幸的是,我发现的解决方案不适用于bootstrap或搞乱风格.
这里有一个简单的bootstrap表,但由于某些原因我不知道tbody的高度不是10px.
height: 10px !important; overflow: scroll;
例:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody style="height: 10px !important; overflow: scroll; ">
<tr>
<td class="filterable-cell">111 Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>我需要创建一个带有固定标题和固定第一列的html表(或类似的东西).
到目前为止我看到的每个解决方案都使用Javascript或jQuery设置scrollTop/scrollLeft,但它在移动浏览器上无法顺利运行,所以我正在寻找一个纯CSS解决方案.
我在这里找到了一个固定列的解决方案:jsfiddle.net/C8Dtf/20/但我不知道如何增强它以使标题也得到修复.
我想让它在webkit浏览器上工作或使用一些css3功能,但我再说一遍,我不想Javascript用于滚动.
编辑:这是我想要实现的行为的示例:https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html
我知道,在stackoverflow上至少有三十个这样的问题仍然存在,我无法做到这一点:
一个简单的表格,其中thead被固定/固定在顶部,并且tbody被滚动.我过去几天尝试过这么多,现在我最终在这里哭泣求救.
解决方案应该适用于IE8 +和最新的FF,Chrome和Safari.与其他"像可能重复的区别这一个是,我不希望使用两个嵌套表或jQuery的(普通的JavaScript是罚款虽然).
演示我想要的东西:
http://www.imaputz.com/cssStuff/bigFourVersion.html.
问题是它在IE中不起作用,我可以使用一些JS.