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

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


当前回答

If you want to make a 'title' cell that spans all columns, as header for your table, you may want to use the caption tag (http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) This element is meant for this purpose. It behaves like a div, but doesn't span the entire width of the parent of the table (like a div would do in the same position (don't try this at home!)), instead, it spans the width of the table. There are some cross-browser issues with borders and such (was acceptable for me). Anyways, you can make it look as a cell that spans all columns. Within, you can make rows by adding div-elements. I'm not sure if you can insert it in between tr-elements, but that would be a hack I guess (so not recommended). Another option would be messing around with floating divs, but that is yuck!

Do

<table>
    <caption style="gimme some style!"><!-- Title of table --></caption>
    <thead><!-- ... --></thead>
    <tbody><!-- ... --></tbody>
</table>

<div>
    <div style="float: left;/* extra styling /*"><!-- Title of table --></div>
    <table>
        <thead><!-- ... --></thead>
        <tbody><!-- ... --></tbody>
    </table>
    <div style="clear: both"></div>
</div>

其他回答

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

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

我有IE 7.0, Firefox 3.0和Chrome 1.0

一个TD中的colspan="0"属性不会跨越任何上述浏览器中的所有TD。

可能不推荐作为适当的标记实践,但如果您给出的colspan值高于可能的总no。那么TD就张成了所有的列。

当表格布局CSS属性被设置为fixed时,这将不起作用。

再说一次,这不是完美的解决方案,但在上面提到的3个浏览器版本中,当表布局CSS属性是自动的时候,这似乎是有效的。

只是想补充我的经验并回答这个问题。 注意:它只在你有一个预定义的表和一个带有th的tr时有效,但是在你的行中动态加载(例如通过AJAX)。

在这种情况下,您可以计算第一个标题行中有th的数量,并使用它来张成整个列。

当您希望在没有找到结果的情况下转发消息时,可能需要此选项。

在jQuery中,table是你的输入表:

var trs = $(table).find("tr");
var numberColumns = 999;
if (trs.length === 1) {
    //Assume having one row means that there is a header
    var headerColumns = $(trs).find("th").length;
    if (headerColumns > 0) {
        numberColumns = headerColumns;
    }
}

作为部分答案,这里有关于问题中提到的colspan="0"的几点。

tl;博士版:

Colspan ="0"在任何浏览器中都不起作用。W3Schools是错误的(一如既往)。HTML 4说colspan="0"应该使一个列跨越整个表,但没有人实现这一点,并且在HTML 4之后从规范中删除了它。

更多细节和证据:

All major browsers treat it as equivalent to colspan="1". Here's a demo showing this; try it on any browser you like. td { border: 1px solid black; } <table> <tr> <td>ay</td> <td>bee</td> <td>see</td> </tr> <tr> <td colspan="0">colspan="0"</td> </tr> <tr> <td colspan="1">colspan="1"</td> </tr> <tr> <td colspan="3">colspan="3"</td> </tr> <tr> <td colspan="1000">colspan="1000"</td> </tr> </table> The HTML 4 spec (now old and outdated, but current back when this question was asked) did indeed say that colspan="0" should be treated as spanning all columns: The value zero ("0") means that the cell spans all columns from the current column to the last column of the column group (COLGROUP) in which the cell is defined. However, most browsers never implemented this. HTML 5.0 (made a candidate recommendation back in 2012), the WhatWG HTML living standard (the dominant standard today), and the latest W3 HTML 5 spec all do not contain the wording quoted from HTML 4 above, and unanimously agree that a colspan of 0 is not allowed, with this wording which appears in all three specs: The td and th elements may have a colspan content attribute specified, whose value must be a valid non-negative integer greater than zero ... Sources: https://www.w3.org/TR/html50/tabular-data.html#attributes-common-to-td-and-th-elements https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements https://www.w3.org/TR/html53/tabular-data.html#attributes-common-to-td-and-th-elements The following claims from the W3Schools page linked to in the question are - at least nowadays - completely false: Only Firefox supports colspan="0", which has a special meaning ... [It] tells the browser to span the cell to the last column of the column group (colgroup) and Differences Between HTML 4.01 and HTML5 NONE. If you're not already aware that W3Schools is generally held in contempt by web developers for its frequent inaccuracies, consider this a lesson in why.

如果您正在使用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));
});

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