javascript - 将表格分成两个保持相同的列宽

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