將表格拆分為兩個，並保持相同的列寬

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