将表格拆分为两个，并保持相同的列宽

Question

我正在尝试拆分表-即，撕下thead并将其放在自己的表中。 到目前为止，这是我得到的：

小提琴

var $colgroup = $('<colgroup>');

$('td,th', '.query-results tr:first').each(function () {
    $colgroup.append($('<col>').width($(this).outerWidth()));
});

$('<table>')
    .insertBefore('.query-results')
    .append($colgroup)
    .append(
$('.query-results thead'));

$('.query-results').prepend($colgroup.clone());

我似乎无法使列宽得到尊重； 桌子永远不会排队。 我试过像这个家伙所说的那样使用colgroups，但这似乎也没有效果。

有什么事吗

使用width属性也不会改变任何东西。

Answer 1

似乎必须设置表格宽度才能遵守列宽。

var $colgroup = $('<colgroup>')

var tableWidth = $('.query-results').width();

$('td,th','.query-results tr:first').each(function() {
   $colgroup.append($('<col>').attr('width',parseInt($(this).outerWidth())));
});

$('<table>')
    .width(tableWidth)
    .insertBefore('.query-results')
    .append($colgroup)
    .append(
        $('.query-results thead')
    );

$('.query-results').width(tableWidth).prepend($colgroup.clone());

小提琴

Answer 2

如果您要制作带有固定标题的可滚动表，请在此处查看：

http://salzerdesign.com/test/fixedTable.html