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

的示例

带有固定标头的HTML Bootstrap表

1 个答案: