javascript - 修复了 html 表格中的行和列

Question

我有一个具有固定宽度和高度的 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>

标签： javascripthtmlcss

Answer 1

试试这个但忽略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>