Javascript JQuery在多个插件后更改宽度

我正在尝试在一个表中使用可滚动的

tbody

创建一个表。关于jquery或纯css可滚动tbody元素还有很多其他问题，但没有一个像我这样涉及

问题是我还使用了一个jQuery tablefilter插件，它为过滤器添加了额外的标题行。当我加载tablescroll插件时，它会覆盖表维度，并且我的标题不再匹配

列的宽度是可变的，tablescroll插件假定它们的长度相等，这会导致不正确的对齐

我尝试使用javascript手动重置它们：

var $table = $(".tablescroll"),
$cols = $(".tablescroll tr td").slice(0,5),
$th = $(".fixedHeader tr th");
$table.tableScroll();
$filter = $(".filterRow th");
$.each($th, function(index, value){
      $th[index].style.width = $cols[index]['clientWidth'];
      $filter[index].style.width = $cols[index]['clientWidth'];
});

并且它将正确的样式属性添加到每个

th

，但标题保持相同的不正确对齐。这也是页面上加载的最后一个javascript

这是我的HTML:

<form>
<table class="tablescroll">
          <thead class="fixedHeader">
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Site</th>
                <th>Created Date</th>
                <th>Modified Date</th>
            </tr>
        </thead>
                    <tbody>
            <tr>
                <td>Test Name</td>
                <td>Test Description</td>
                <td>Test Site</td>
                <td>2013-12-18 15:20:05</td>
                <td>2014-01-29 19:36:09</td>
            </tr>
                    </tbody>
    </table>

</form>

名称
描述
场地
创建日期
修改日期
测试名称
测试描述
试验场地
2013-12-18 15:20:05
2014-01-29 19:36:09

我很好奇为什么我的javascript调用添加了样式，但没有改变外观，我是否应该继续使用这个插件，或者仅仅开发一个纯css解决方案

---

提前感谢。

您是否尝试过为表设置内联样式而不是使用Javascript

<table style="width:##px;">

或直接用于标题列

<tr><th style="width:##px;"></th></tr>

---

就像@jkgm777所说的那样，该插件删除标题并为其创建一个新表。这会丢弃所有在特定表中引用header类的css和js，从而导致该行为

---

我的解决方案将需要一个纯css版本，因为排序和过滤功能无法跨表工作。

如果查看页面源代码，js将实现这一点。然而，通过js对其进行抽象可以让我在多个地方使用它，就像我想要的那样。你的标题会根据数据的不同而变化吗？“最小宽度”和“最大宽度”有一个范围吗？您的表格标题宽度将根据行的内容重新调整大小，如果您设置了最大宽度且单元格的内容太长，则会将您的文本包装成多行。对不起，我误解了您的回答。每列都有一个定义的宽度，只是每列的宽度不同。我编辑了我的评论以反映我为什么使用js。您是否有可能正在加载其他脚本的页脚（不是表页脚，而是在每个页面上动态加载的页脚）？是的，但是在我添加tablescroll插件之前，页面的格式是正确的。我知道这是导致问题的原因，所以我尝试在初始化后运行修复程序。