带有固定标头的HTML Bootstrap表

Question

我有一个HTML引导表，它有超过15列，所以我启用溢出自动，它有垂直和水平滚动。我正在尝试修复标题部分，但我无法做到这一点只是因为表格宽度超过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的例子