jquery - 带有动态宽度表的固定表头？

Question

我在网上找到了无数的固定标题表示例，在 StackOverflow 上也找到了很多关于该主题的帖子，但还没有找到一个允许随浏览器调整大小的动态宽度表的示例。任何时候我尝试使宽度动态化时，thead 列都不会与 tbody 列对齐。这是我尝试过的一小部分示例:

• Pure CSS version 1
• Pure CSS version 2
• FixedTableHeader (我无法使用 jQuery 1.9.1)
• FloatThead

jqGrid 和数据表似乎工作，但我正在尝试使用 Knockout 构建一个表，并且宁愿避免两者 - 我们实际上正在完全远离 jqGrid。

有什么建议吗？

更新 -我站(或坐)纠正。 jQuery.floatThead does support dynamic width tables , 并且标题列在窗口调整大小时与正文列对齐。我猜第 50 次是一种魅力？我只是用 overflow-x:hidden; 隐藏了水平滚动条，并将表格包裹在一个 div 中，这是插件支持的:

var $table = $('.myTable');
$table.floatThead({
    scrollContainer: function ($table) {
        return $table.closest('.wrapper');
    }
});

Answer 1

临时解决方案是在窗口调整大小时多次调整表的大小

$(window).on('resize', function () {
    ResizeFloatThead();
});
ResizeFloatThead = function () {

    var interval = 500;
    for (var i = 0; i < 5; i++) {
        setTimeout(function () {
            $('.myTable').floatThead('reflow');
        }, interval);
        interval -= 100;
    };
};