<分区>
我找到了固定头表的以下解决方案:
table {
width: 450px;
border-collapse: collapse;
}
thead {
display: block;
width: 450px;
overflow: auto;
color: #fff;
background: #000;
}
tbody {
display: block;
width: 450px;
height: 200px;
background: pink;
overflow: auto;
}
th,
td {
padding: 0;
text-align: left;
vertical-align: top;
border-left: 1px solid #fff;
}
<table>
<thead>
<tr>
<th style="width:200px">Header 1</th>
<th style="width:200px">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:200px">Cell 1, Row 1</td>
<td style="width:200px">Cell 2, Row 1</td>
</tr>
<tr>
<td>Cell 1, Row 2</td>
<td>Cell 2, Row 2</td>
</tr>
<tr>
<td>Cell 1, Row 3</td>
<td>Cell 2, Row 3</td>
</tr>
<tr>
<td>Cell 1, Row 4</td>
<td>Cell 2, Row 4</td>
</tr>
<tr>
<td>Cell 1, Row 5</td>
<td>Cell 2, Row 5</td>
</tr>
<tr>
<td>Cell 1, Row 6</td>
<td>Cell 2, Row 6</td>
</tr>
<tr>
<td>Cell 1, Row 7</td>
<td>Cell 2, Row 7</td>
</tr>
<tr>
<td>Cell 1, Row 8</td>
<td>Cell 2, Row 8</td>
</tr>
<tr>
<td>Cell 1, Row 9</td>
<td>Cell 2, Row 9</td>
</tr>
<tr>
<td>Cell 1, Row 10</td>
<td>Cell 2, Row 10</td>
</tr>
<tr>
<td>Cell 1, Row 11</td>
<td>Cell 2, Row 11</td>
</tr>
<tr>
<td>Cell 1, Row 12</td>
<td>Cell 2, Row 12</td>
</tr>
</tbody>
</table>
此解决方案的问题在于它以像素为单位为表格和单元格设置了固定宽度。但是,我需要 <table style="width:100%">
和 <td style="width:X%">
.如何在 CSS 中仅使用一个 html 表且不使用 JS 来制作固定的表头表和单元格宽度百分比?