表固定标头和可滚动体

Question

表固定标头和可滚动体我试图使用引导3表创建一个具有固定标题和可滚动内容的表。不幸的是，我找到的解决方案不适用于引导，也不能破坏样式。这里有一个简单的引导表，但由于某种原因，tbody的高度不是10 px。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>

Answer 1

您可能会在一个页面上得到多个表，因此需要CSS类。请找一个改进的@Giulio解决方案。

只需在表中声明：

<table class="table table-striped header-fixed"></table>

CSS

.header-fixed {
    width: 100% }.header-fixed > thead,.header-fixed > tbody,.header-fixed > thead > tr,.header-fixed > tbody > 
    tr,.header-fixed > thead > tr > th,.header-fixed > tbody > tr > td {
    display: block;}.header-fixed > tbody > tr:after,.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;}.header-fixed > tbody {
    overflow-y: auto;
    height: 150px;}.header-fixed > tbody > tr > td,.header-fixed > thead > tr > th {
    width: 20%;
    float: left;}

请注意，当前的实现只适合五列。如果需要不同的号码，请更改宽度参数来自20%至*100%/数目_列*。