分割表保持两个相同的列宽

Question

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

fiddle

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 like this guy said，但这似乎也没有效果。

可能出现什么问题？

Using the width attribute也不会改变任何内容。

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());

fiddle

Answer 2

如果您正试图制作一个带有固定标题的可滚动表格，请点击此处：

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