我有一个固定宽度和高度的html表,溢出设置为滚动。我希望在垂直方向滚动时固定第一行,在水平滚动时固定第一列。我没有戏剧。
<table>
<tr>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
</tr>
<tr>
<td>Value 21</td>
<td>Value 22</td>
<td>Value 23</td>
</tr>
<tr>
<td>Value 31</td>
<td>Value 32</td>
<td>Value 33</td>
</tr>
<tr>
<td>Value 41</td>
<td>Value 42</td>
<td>Value 43</td>
</tr>
</table>
答案 0 :(得分:0)
尝试此操作,但忽略js部分,它仅用于生成大表。您的解决方案在CSS部分
// generate table
var row = '<tr>',rowLen=100,colLen=100,content='';
for(var i=0;i<rowLen;i++)
row+= '<td>text'+i+'</td>';
row+= '</tr>';
for(var j=0;j<colLen;j++)
content+=row;
document.getElementsByClassName('freezHeaderAndTitle')[0].innerHTML=content;
.freezHeaderAndTitle{
border: 2px solid black;
border-collapse: collapse;
}
.freezHeaderAndTitle td{
border: 1px solid black;
padding: 5px 10px;
}
.freezHeaderAndTitle tr:first-of-type td{
position: -webkit-sticky;
position: sticky;
top: 0px;
background-color: cyan;
}
.freezHeaderAndTitle td:first-of-type{
position: -webkit-sticky;
position: sticky;
background-color: red;
left: 0px;
}
/* Edit: corner fixed always */
.freezHeaderAndTitle tr:first-of-type td:first-of-type{
z-index:100;
}
<table class="freezHeaderAndTitle">
</table>