1

我正在尝试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>

我很好奇为什么我的 javascript 调用会添加样式但对外观没有任何改变，我是否应该继续使用这个插件或者只是想出一个纯 css 解决方案。

提前致谢。

4

2 回答 2

1

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

由于排序和过滤功能不适用于跨表，我的解决方案将需要纯 CSS 版本。

于 2014-04-08T17:18:02.983 回答
1

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

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

或直接用于标题列

<tr><th style="width:##px;"></th></tr>
于 2014-04-08T16:12:33.383 回答