Question

我正在尝试使用this plugin在表格中创建一个带有可滚动tbody的表格。关于jquery或pure-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>

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

提前致谢。

Answer 1

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

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

或直接用于标题栏

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

Answer 2

就像@ jkgm777所说，该插件会删除标题并为它们创建一个新表。这抛弃了所有引用行为的特定表中引用头类的css和js。

我的解决方案需要一个pure-css版本，因为排序和过滤功能无法在表格中使用。

JQuery在多个插件之后改变宽度

2 个答案: