有很多方法可以冻结html表的标题行,但是我需要微创。我正在一个大型而复杂的系统中工作,在该系统中,表格html是通过多层后端编码生成的,更改表格结构将是不平凡且冒险的(很多复杂的javascript和css取决于HTML结构保持原样,我不想破坏任何东西)。因此,我正在寻找一种方法,通过更改/仅添加CSS和/或向表或表中的行添加属性来冻结html标头行(需要冻结2行,而不仅仅是1行)。这是我的桌子的准确示例:
<table>
<tbody>
<tr>
<th> </th>
<th id="col0">Option ID</th>
<th id="col1">Description</th>
<th id="col2" title="Sort on Description">Description</th>
</tr>
<tr>
<th> </th>
<td title="Filter on Option ID (Text)">
<input type="text" id="f0">
</td>
<td title="Filter on Description (Text)>
<input type="text" id="f1">
</td>
</tr>
<tr>
<td><input type="radio" name="chk0" id="c_01Q0"></td>
<td>0093005</td>
<td>Local pickup & delivery.</td>
</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
</tbody>
</table>
如您所见,这没有什么异国情调。但是,当我寻找解决方案时,我发现了很多examples like this,它们需要对HTML进行比我敢做的更多的结构更改(我主要是担心不得不用{{1}包围表格}和section
元素-似乎很多CSS只是冻结标题行)。前两行都需要冻结,因此当我向下滚动时,它们会保持在原位。第一个数据行(非冻结)是包含 0093005 的行。
一些目标/愿望:
在此先感谢大家的时间。