冻结顶栏(标题栏)

在node.js应用程序中:是否有办法在Excel中冻结表格中的顶部行,标题行,在浏览器中的方式?

我怀疑这是一个.css风格,但不知道如何去做。 fixed “冻结”了整个表格,而不仅仅是顶部的行,因为项目出现在浏览器窗口的不可见部分,所以不出现垂直滚动条以便能够看到它们。 在这种情况下, sticky似乎什么都不做。

的CSS

 #one { position: fixed; top: 100px; left: 15px; } 

app.js

 <div className="row" id="one"> <table className="table-hover"> <thead> 

这是一个类似Excel的固定桌面的解决schemeposition: sticky; (优雅和个人喜爱)。 点击第一行使其变得粘稠:

 th, td { width: 100px; height: 100px; background-color: #eee; text-align: center; border-bottom: 2px solid transparent; } tr.sticks { cursor: pointer; } tr.stuck th { position: sticky; top: 0px; border-bottom: 2px solid #000; } 
 <table> <tbody> <tr class="sticks" onclick='this.className = this.className == "sticks" ? "sticks stuck" : "sticks";'> <th> Name </th> <th> Amount </th> <th> Date </th> <th> Color </th> </tr> <tr> <td> A </td> <td> B </td> <td> C </td> <td> D </td> </tr> <tr> <td> A </td> <td> B </td> <td> C </td> <td> D </td> </tr> <tr> <td> A </td> <td> B </td> <td> C </td> <td> D </td> </tr> <tr> <td> A </td> <td> B </td> <td> C </td> <td> D </td> </tr> <tr> <td> A </td> <td> B </td> <td> C </td> <td> D </td> </tr> <tr> <td> A </td> <td> B </td> <td> C </td> <td> D </td> </tr> </tbody> </table>