如何用jQuery设置表格th宽度与对应td宽度相等？

我来帮你搞定这个固定表头列宽不匹配的问题～其实核心思路就是在页面加载（或表格渲染完成）时，把每一列TD的宽度同步给对应的TH，因为position: fixed会让元素脱离文档流，丢失原本的列宽信息。

具体实现步骤： #

1. 写一个同步列宽的函数
   这个函数会遍历表头的TH，把对应位置TD的宽度赋值给它：

   function syncTableColumnWidths() {
     // 获取表格第一行的所有TD（确保tbody有数据，若动态加载需在数据渲染后调用）
     const $tds = $(".js-table tbody tr:first-child td");
     const $ths = $(".js-table-thead th");
     
     $ths.each(function(index) {
       // 用outerWidth()获取TD的实际宽度（包含内边距，更准确）
       const targetWidth = $tds.eq(index).outerWidth();
       // 给对应的TH设置相同宽度
       $(this).outerWidth(targetWidth);
     });
   }
   

2. 在合适的时机调用函数

   • 页面初始化时调用，确保列宽一开始就匹配
   • 窗口大小改变时重新调用，避免窗口缩放后列宽错乱
   • 结合你的滚动固定逻辑：

   $(function() {
     // 初始化同步列宽
     syncTableColumnWidths();
     
     // 窗口 resize 时重新同步
     $(window).resize(function() {
       syncTableColumnWidths();
     });
     
     // 你的滚动固定表头逻辑
     $(window).scroll(function() {
       const theadHeight = $(".js-table-thead").outerHeight();
       const tablePos = $(".js-table").offset().top;
       
       if ($(window).scrollTop() >= tablePos) {
         $(".js-table-thead").addClass("fixed");
       } else {
         $(".js-table-thead").removeClass("fixed");
       }
     });
   });
   

3. 补充CSS细节
   给固定的表头加上宽度和背景色，避免表头缩成一团或被下面内容穿透：

   .js-table-thead.fixed {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%; /* 保持和表格一致的宽度 */
     background-color: #ffffff;
     z-index: 100; /* 确保表头在最上层 */
   }
   

额外注意点： #

• 如果你的表格是动态加载数据（比如从接口获取后渲染），一定要在数据渲染完成后再调用syncTableColumnWidths()，不然会因为找不到TD元素导致宽度同步失败。
• 若TD有边框或外边距，可以用outerWidth(true)来包含外边距，根据你的实际样式调整。

内容的提问来源于stack exchange，提问作者ttmt