js 原生table表格表头不动内容可滚动

在JavaScript原生的HTML `<table>` 中，如果你想创建一个表头固定，而内容区域可以滚动的表格，你可以通过CSS样式和一些基本的HTML结构来实现。以下是一个简单的步骤：

1. **设置基本结构**：

   <table id="scrolling-table">
     <thead>
       <tr>
         <!-- 表头单元格 -->
         <th>列1</th>
         <th>列2</th>
         <!-- 更多列... -->
       </tr>
     </thead>
     <tbody>
       <!-- 长度可变的数据行 -->
       <tr>
         <td>数据1</td>
         <td>数据2</td>
         <!-- ... -->
       </tr>
       <!-- 添加更多的行... -->
     </tbody>
   </table>

2. **CSS样式**：
使用CSS `position` 和 `overflow` 属性将表头定位并添加滚动条到tbody部分：

   #scrolling-table {
     width: 100%; /* 设置表格宽度 */
     border-collapse: collapse; /* 合并边框 */
   }
   
   thead {
     position: sticky;
     top: 0;
     background-color: white; /* 或者你想设定的颜色 */
     z-index: 1; /* 确保表头始终位于上方 */
   }

   tbody {
     overflow-y: auto; /* 当内容超过可视区时启用垂直滚动 */
   }

这样，当你的内容过多时，表头会始终保持在顶部，并且tbody区域的内容可以根据需要上下滚动。