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

时间:2013-04-23 02:24:44

标签: javascript jquery

我正在尝试拆分一个表 - 即,撕掉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也不会改变任何内容。

2 个答案:

答案 0 :(得分:0)

似乎您必须设置表格宽度,以便尊重列宽。

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

答案 1 :(得分:0)

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

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