如何冻结带有输入字段的HTML表格顶部行？

debugcn 发表于 Dev

内西

这是表：

<table>
    <tr> 
        <th>row1</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>

    <tr> 
        <th>row2</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>
    ...
</table>

我需要冻结row1并滚动其他行。我该怎么做？

哈里斯·夏尔马

您可以添加display: block到表和表行。

要冻结第一行，只需在第一行和父元素上position: sticky加上标记top:0即可position: relative。

尝试运行代码段

table {
  margin-top: 50px;
  height: 50px;
  overflow: auto;
  display: block;
}

tbody {
 position: relative
}

tbody tr {
 display: block
}

tbody tr:first-child{
 position: sticky;
 top: 0;
 background: white;
}

<table>
    <tr> 
        <th>row1</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>

    <tr> 
        <th>row2</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>
    <tr> 
        <th>row2</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>
    <tr> 
        <th>row2</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>
    <tr> 
        <th>row2</th>
        <th><input type="text"></th>
        <th><input type="text"></th>
        <th><input type="text"></th>
    </tr>

</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。