我如何指定一个td标签应该跨越所有列(当表中的列的确切数量将是可变的/难以确定当HTML被呈现)?w3schools提到你可以使用colspan="0",但它没有确切地说什么浏览器支持这个值(IE 6在我们的列表中支持)。

看起来,将colspan设置为大于您可能拥有的理论列数量的值是可行的,但如果您将表布局设置为fixed,则它将不起作用。对colspan使用一个大数字的自动布局有什么缺点吗?有更正确的方法吗?


当前回答

另一个可行但丑陋的解决方案:colspan="100",其中100是一个大于需要colspan的列总数的值。

根据W3C的规定,colspan="0"选项仅对COLGROUP标记有效。

其他回答

另一个可行但丑陋的解决方案:colspan="100",其中100是一个大于需要colspan的列总数的值。

根据W3C的规定,colspan="0"选项仅对COLGROUP标记有效。

如果您正在使用jQuery(或者不介意添加它),这将比任何这些技巧更好地完成工作。

function getMaxColCount($table) {
    var maxCol = 0;

    $table.find('tr').each(function(i,o) {
        var colCount = 0;
        $(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) {
            var cc = Number($(oo).attr('colspan'));
            if (cc) {
                colCount += cc;
            } else {
                colCount += 1;
            }
        });
        if(colCount > maxCol) { 
            maxCol = colCount; 
        }
    });

    return maxCol;
}

为了简化实现,我装饰任何td/th我需要调整类,如“maxCol”,然后我可以做以下工作:

$('td.maxcols, th.maxcols').each(function(i,o) {
    $t = $($(o).parents('table')[0]); $(o).attr('colspan',  getMaxColCount($t));
});

如果你发现一个实现不适用,不要抨击答案,在评论中解释,如果它可以覆盖,我会更新。

就用这个吧:

colspan="100%"

它适用于Firefox 3.6, IE 7和Opera 11!(我猜在其他人身上,我无法尝试)


警告:正如下面评论中提到的,这实际上与colspan="100"相同。因此,这个解决方案将打破表与css table-layout:固定,或超过100列。

对于IE 6,你会希望colspan等于表中的列数。如果你有5列,那么你需要:colspan="5"。

原因是IE处理colspan的方式不同,它使用HTML 3.2规范:

IE实现了HTML 3.2的定义,它将colspan=0设置为colspan=1。

这个bug有很好的文档记录。

下面是一个简洁的es6解决方案(类似于Rainbabba的答案,但没有jQuery)。

Array.from(document.querySelectorAll('[data-colspan-max]')).forEach(td => { let table = td; while (table && table.nodeName !== 'TABLE') table = table.parentNode; td.colSpan = Array.from(table.querySelector('tr').children).reduce((acc, child) => acc + child.colSpan, 0); }); html { font-family: Verdana; } tr > * { padding: 1rem; box-shadow: 0 0 8px gray inset; } <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> </tr> </thead> <tbod><tr> <td data-colspan-max>td will be set to full width</td> </tr></tbod> </table>