表固定标头和可滚动体

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&nbsp;class="table&nbsp;table-striped&nbsp;header-fixed"></table>CSS.header-fixed&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%&nbsp;}.header-fixed&nbsp;>&nbsp;thead,.header-fixed&nbsp;>&nbsp;tbody,.header-fixed&nbsp;>&nbsp;thead&nbsp;>&nbsp;tr,.header-fixed&nbsp;>&nbsp;tbody&nbsp;>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;tr,.header-fixed&nbsp;>&nbsp;thead&nbsp;>&nbsp;tr&nbsp;>&nbsp;th,.header-fixed&nbsp;>&nbsp;tbody&nbsp;>&nbsp;tr&nbsp;>&nbsp;td&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block;}.header-fixed&nbsp;>&nbsp;tbody&nbsp;>&nbsp;tr:after,.header-fixed&nbsp;>&nbsp;thead&nbsp;>&nbsp;tr:after&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;'&nbsp;'; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;visibility:&nbsp;hidden; &nbsp;&nbsp;&nbsp;&nbsp;clear:&nbsp;both;}.header-fixed&nbsp;>&nbsp;tbody&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;overflow-y:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;150px;}.header-fixed&nbsp;>&nbsp;tbody&nbsp;>&nbsp;tr&nbsp;>&nbsp;td,.header-fixed&nbsp;>&nbsp;thead&nbsp;>&nbsp;tr&nbsp;>&nbsp;th&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;20%; &nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left;}请注意，当前的实现只适合五列。如果需要不同的号码，请更改宽度参数来自20%至*100%/数目_列*。