Javascript 无需滚动即可修复HTML表格标题

请建议我如何锁定表中的标题以避免滚动。查找示例代码：。 我想锁定Column1和Column2标题，这样当我们向下滚动查看数据时，表标题仍然可见。提前感谢。 我的html代码：

<div id="test" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td> 
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
 <tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">

<table width="300px" border="1" class="newTable">
    <tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;1</td>
<td class="rowStyle">data1  </td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;2</td>
<td class="rowStyle">data2</td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;3</td>
<td class="rowStyle">data3</td></tr>
    <tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;1</td>
<td class="rowStyle">data1  </td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;1</td>
<td class="rowStyle">data1  </td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;2</td>
<td class="rowStyle">data2</td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;3</td>
<td class="rowStyle">data3</td></tr>
</table></td></tr>


</table>
</td>
</tr>
</table>
</div>

专栏1
专栏2
数据1
数据1
数据2
数据2
数据3
数据3
数据1
数据1
数据2
数据2
数据1
数据1
数据2
数据2
数据3
数据3
数据3
数据3

您必须将标题放在单独的表格中，并在其上放置一个固定位置。看看这个

专栏1
专栏2
....

像这样尝试：

在HTML中对此进行了更改：

<th>Column1
  <div>Column111</div>
</th>
<th>Column2
  <div>Column222</div>
</th>

注意：css有点粗糙，但是有点样式化会更好

---

---

另一种方法是将标题线与表格分开，使其成为两个元素。

您可以指定位置：固定；属性设置为th样式，然后将其设置为与表格相适应，以便正确定位和重叠

th {
    position: fixed;
}

---

我还找到了这个回答你问题的链接

你已经发布了这样一个问题。。。。已删除和其他用户。。。你的意思是什么。是的，我用同样的方法尝试过，但是表头的宽度与其他表中显示的数据的宽度不匹配。@Mathieu Labrie Parent.A调整表头的宽度。。。我把它从300改为290，它非常适合，这是一个糟糕的解决方案<代码>位置：固定粘贴到

窗口

，而不是特定元素。如果页面充满内容并成为滚动条，

th

将不会停留在正确的位置。所以这只适用于像小提琴一样完美的场景。

th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: blue;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  line-height: normal;
  border-left: 1px solid #800;
}

th {
    position: fixed;
}