固定表头有动态宽度表吗？

Question

我已经在网上找到了无数的Fixed Header表示例和关于这个主题的尽可能多的StackOverflow帖子,但还没有找到一个允许使用浏览器调整大小的动态宽度表.每当我尝试使宽度动态时,thead列将不会与tbody列对齐.这是我尝试的样本的一小部分:

• 纯CSS版本1
• 纯CSS版本2
• FixedTableHeader(我无法使用jQuery 1.9.1)
• FloatThead

jqGrid和数据表似乎工作,但我正在尝试使用Knockout构建一个表,并希望避免两者 - 我们实际上完全离开了jqGrid.

有人建议吗？

更新 - 我站着(或坐着)纠正.jQuery.floatThead确实支持动态宽度表,并且标题列与窗口大小调整时的主体列对齐.我猜第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;
    };
};