我正在尝试使用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>我正在使用变换:在tbody和thead上的translateY将它们放在一个大的div中.
table thead {
transform: translateY(200px);
background: green;
}
table tbody {
transform: translateY(190px);
background: blue;
}
在webkit(Chrome和Safari)中,tbody覆盖了thead - 即使我向两个选择器添加了z-index.这是一个例子.thead应该始终是可见的,并且tbody应该在背景中具有较低的z-index.
为什么有这种方法呢？