锁定的关键是设置距离表头或左侧某个参照物的位置不变。

对于表头，已开始就可以设定。设定列的时候，可以采用循环设置每个td的距离实现。

用到的css:

body {
background-color: white;
color: black;
}

div#tbl-container {
width: 418px;
height: 122px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

table {
table-layout: fixed;
border-collapse: collapse;
background-color: WhiteSmoke;
}

div#tbl-container table th {
width: 100px;
}

thead th, thead th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
}
 
thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /*IE5+ only*/
z-index: 20;
}

thead th.locked {z-index: 30;}

td.locked,  th.locked{
background-color: #ffeaff;
font-weight: bold;
border-right: 1px solid silver;
left: expression(document.getElementById("tbl-container").scrollLeft); /*IE5+ only*/
position: relative;
z-index: 10;
}

td {
padding: 2px 5px 2px 2px;
font-size: 12px;
border-left: 1px solid silver;
border-bottom: 1px solid silver;
text-align: right;
}

button {
width: 150px;
font-weight: bold;
color: navy;
margin-bottom: 5px;
}

html：

来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/33590/viewspace-779838/ ，如需转载，请注明出处，否则将追究法律责任。