表固定页眉和可滚动主体

Question

我正在尝试使用bootstrap 3表制作具有固定标题和可滚动内容的表。不幸的是，我发现的解决方案不适用于引导程序或使样式混乱。

这里有一个简单的引导表，但是由于某种原因我不知道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>

Answer 1

这是有效的解决方案：

table {

    width: 100%;

}



thead, tbody, tr, td, th { display: block; }



tr:after {

    content: ' ';

    display: block;

    visibility: hidden;

    clear: both;

}



thead th {

    height: 30px;



    /*text-align: left;*/

}



tbody {

    height: 120px;

    overflow-y: auto;

}



thead {

    /* fallback */

}





tbody td, thead th {

    width: 19.2%;

    float: left;

}


<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>



<table class="table table-striped">

    <thead>

        <tr>

            <th>Make</th>

            <th>Model</th>

            <th>Color</th>

            <th>Year</th>

        </tr>

    </thead>

    <tbody>

        <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>

        <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>