我如何指定一个td标签应该跨越所有列(当表中的列的确切数量将是可变的/难以确定当HTML被呈现)?w3schools提到你可以使用colspan="0",但它没有确切地说什么浏览器支持这个值(IE 6在我们的列表中支持)。
看起来,将colspan设置为大于您可能拥有的理论列数量的值是可行的,但如果您将表布局设置为fixed,则它将不起作用。对colspan使用一个大数字的自动布局有什么缺点吗?有更正确的方法吗?
我如何指定一个td标签应该跨越所有列(当表中的列的确切数量将是可变的/难以确定当HTML被呈现)?w3schools提到你可以使用colspan="0",但它没有确切地说什么浏览器支持这个值(IE 6在我们的列表中支持)。
看起来,将colspan设置为大于您可能拥有的理论列数量的值是可行的,但如果您将表布局设置为fixed,则它将不起作用。对colspan使用一个大数字的自动布局有什么缺点吗?有更正确的方法吗?
当前回答
就用这个吧:
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有很好的文档记录。
我有IE 7.0, Firefox 3.0和Chrome 1.0
一个TD中的colspan="0"属性不会跨越任何上述浏览器中的所有TD。
可能不推荐作为适当的标记实践,但如果您给出的colspan值高于可能的总no。那么TD就张成了所有的列。
当表格布局CSS属性被设置为fixed时,这将不起作用。
再说一次,这不是完美的解决方案,但在上面提到的3个浏览器版本中,当表布局CSS属性是自动的时候,这似乎是有效的。
另一个可行但丑陋的解决方案:colspan="100",其中100是一个大于需要colspan的列总数的值。
根据W3C的规定,colspan="0"选项仅对COLGROUP标记有效。
作为部分答案,这里有关于问题中提到的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.
只是想补充我的经验并回答这个问题。 注意:它只在你有一个预定义的表和一个带有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;
}
}