具有固定标题的 HTML Bootstrap 表

Question

我有一个超过 15 列的 HTML 引导表，所以我启用了自动溢出，它同时具有垂直和水平滚动。我正在尝试修复标题部分，但我无法做到这一点，因为表格宽度超过 100%，而且我不能指定超过 100% 的列宽。任何人都可以用纯 HTML 和 CSS 帮助解决这个问题，我不想使用任何库或脚本代码

注意：我在 Angular5 中渲染此表

Answer 1

HTML

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

CSS

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

这是对您有帮助的示例Example