微创冻结的HTML表标题行?

时间:2018-06-19 23:10:41

标签: html css css3

有很多方法可以冻结html表的标题行,但是我需要微创。我正在一个大型而复杂的系统中工作,在该系统中,表格html是通过多层后端编码生成的,更改表格结构将是不平凡且冒险的(很多复杂的javascript和css取决于HTML结构保持原样,我不想破坏任何东西)。因此,我正在寻找一种方法,通过更改/仅添加CSS和/或向表或表中的行添加属性来冻结html标头行(需要冻结2行,而不仅仅是1行)。这是我的桌子的准确示例:

<table>
    <tbody>
        <tr>
            <th>&nbsp;</th>
            <th id="col0">Option ID</th>
            <th id="col1">Description</th>
            <th id="col2" title="Sort on Description">Description</th>
        </tr>
        <tr>
            <th>&nbsp;</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 的行。

一些目标/愿望:

  1. 简洁比优雅更重要。在这种情况下,我可以接受黑客攻击。
  2. 尽管可以向现有元素添加属性,但尽可能不要更改HTML结构。
  3. 在不接触HTML的情况下进行纯CSS添加/更改是理想的选择,但我怀疑HTML需要进行某种程度的修饰,没关系。
  4. 使用js或jquery只是不得已而为之。

在此先感谢大家的时间。

0 个答案:

没有答案