jQuery-循环通过TD宽度，然后循环通过TH并应用TD宽度

jQuery - Loop Through TD widths and then Loop through TH and apply TD widths

本文关键字：TD 宽度 循环 应用 TH jQuery- 然后      更新时间：2023-09-26

我有一个流体表，现在需要一个固定的thead。问题是，当你修复这个问题时，th-s不尊重tbody的td-s的宽度。列的大小都是通过BootStrap处理的。我读了很多关于这个问题的书，看到了两种解决方案。为了论证起见，两者对我都不起作用。

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

  2. 使用jquery查找window width并将height返回到表中。然后使用锁定的标题进行内部表格滚动。（找到的解决方案示例http://www.bootply.com/JnOYtO9xzn#)

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

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

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

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

这相当复杂。您可以考虑使用此处引用的DataTable插件引导中具有固定标题的可滚动表

相关文章：