前端， 固定列

makliu

有个表格      需要固定前三列；

1. <table id="myTable">
   
2.     <thead>
   
3.         <tr>
   
4.             <th>列1</th>
   
5.             <th>列2</th>
   
6.             <th>列3</th>
   
7.             <th>列4</th>
   
8.             <th>列5</th>
   
9.             <!-- 更多列 -->
   
10.         </tr>
    
11.     </thead>
    
12.     <tbody>
    
13.         <tr>
    
14.             <td>数据1-1</td>
    
15.             <td>数据1-2</td>
    
16.             <td>数据1-3</td>
    
17.             <td>数据1-4</td>
    
18.             <td>数据1-5</td>
    
19.             <!-- 更多数据 -->
    
20.         </tr>
    
21.         <!-- 更多行 -->
    
22.     </tbody>
    
23. </table>

复制代码

已经表格 的   css是

1. table {
   
2.         width: 100%; /* 表格宽度为容器的100% */
   
3.         border-collapse: collapse; /* 合并边框，减少间隔 */
   
4.         position: relative; /* 确保表格是相对定位的 */
   
5.     }
   
6. 
   
7.     th, td {
   
8.         text-align: left; /* 文本左对齐 */
   
9.         padding: 0; /* 移除内边距 */
   
10.         border: none; /* 移除边框 */
    
11.     }
    
12. 
    
13.     /* 为 th 和 td 设置最小宽度，以确保内容不被截断 */
    
14.     th, td {
    
15.         min-width: 50px; /* 可以根据需要调整这个值 */
    
16.         white-space: nowrap; /* 防止内容换行 */
    
17.     }

复制代码

需求： 当向右 拉动  滚动条时，   需要固定前三列，  这要怎么实现？？？？   

makliu

FishC 发表于 2024-12-3 15:23
实现固定表格的前三列，通常需要使用一些CSS技巧来模拟固定列效果，因为原生的HTML和CSS不支持直接固定表格 ...

tbody td:nth-child(2), thead th:nth-child(2) {
    position: sticky;
    left: 50px; /* 调整偏移量以适应列宽 */
    background-color: white;
    z-index: 1;
}     这里  left: 50px 是不是 不应该写死  ？  

makliu

FishC 发表于 2024-12-3 15:29
的确，`left` 的值不应该完全写死，因为这取决于你前一列的实际宽度。你可以根据前三列的宽度进行调整 ...

js 怎么写动态 的 left 偏移量

makliu

FishC 发表于 2024-12-3 15:34
要使用 JavaScript 动态设置每一列的 `left` 偏移量，你可以检测每个列的实际宽度并相应地调整 `left`  ...

css中 怎么获取  从js 中计算的 偏移量

makliu

FishC 发表于 2024-12-3 15:36
在 CSS 中无法直接获取 JavaScript 中计算的值。通常的做法是通过 JavaScript 动态设置样式属性，将计 ...

但是表头的前三列 没在固定， 右拉时还是被隐藏了