0
固定ヘッダーでテーブルを作成しようとしています。私はすべてのことをしましたが、私のヘッダーは全幅として伸びていません。 ここに私のコードとデモがあります：テーブル固定ヘッダーで動作しません。
私は100％幅に合わせる必要があり、th/tdはすべての利用可能なスペースをカバーする必要があります。
.fixed_headers {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background: #ccc;
display: block;
}
.fixed_headers td {
border-bottom: 1px solid #f00;
}
.fixed_headers tr{
display: flex !important;
width: 100%;
}
.fixed_headers thead {
background-color: #f00;
color: #fdfdfd;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 20%;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 30%;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 20%;
}
.fixed_headers td:nth-child(4),
.fixed_headers th:nth-child(4) {
width: 30%;
}
table.fixed_headers thead tr {
display: block;
position: relative;
}
table.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody::-webkit-scrollbar {
width: 8px;
}
.fixed_headers tbody::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #f00;
}<table class="fixed_headers">
<thead>
<tr>
<th>DATA</th>
<th>NOME COMPLETO</th>
<th>TELEFONE</th>
<th>PRÊMIO</th>
</tr>
</thead>
<tbody>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
<tr>
<td>15/01</td>
<td>Castello Branco</td>
<td>(21) 99612-xxx</td>
<td>1000 REAIS</td>
</tr>
</tbody>
</table>
を追加します。それはテーブルだから.fixed_headers''からblock'を – disstruct