javascript - jQuery - 循环遍历 TD 宽度，然后循环遍历 TH 并应用 TD 宽度

Question

我有一个流动的 table ，现在需要一个固定的 thead。问题是当你固定 thead 时，th-s 不尊重 tbody 的 td-s 的宽度。列的大小都由 BootStrap 处理。我已经阅读了很多关于这个主题的文章，并看到了两种解决方案。为了争论的缘故，两者都不适合我。

1. 锁定表格、th 和 tds 的宽度。所以没有响应宽度 - 因此水平滚动。

2. 使用jquery 查找窗口宽度 并将高度 返回到表中。然后做一个带有锁定标题的内表滚动。 (找到的解决方案示例 http://www.bootply.com/JnOYtO9xzn# )

我想尝试的是在所有 td 上找到 width 并将这些 width 传递给相应的 th(如果我需要应用像 th1、td1 这样的类，那就这样吧)。本质上，我试图将 td 宽度绑定(bind)到 th。此外，在 window width 上更改更新。

表格示例:http://jsfiddle.net/u2xZU/165/或 https://jsfiddle.net/5hozvm5d/4/

Answer 1

这将确保 thead 中的 th 始终等于其列中 td 的宽度:

var timer;
$(window).resize(function() {
  clearTimeout(timer);
  timer= setTimeout(function() {
    $('.table tbody tr:first td').each(function(idx) {  //get the first row of tds
      $('.table thead tr:first th').eq(idx)
        .width($(this).width());                        //set corresponding th width
    });
  },10);
}).resize();

使用 setTimeout() 可防止该函数在调整窗口大小时持续运行。

Fiddle