我如何指定一个td标签应该跨越所有列(当表中的列的确切数量将是可变的/难以确定当HTML被呈现)?w3schools提到你可以使用colspan="0",但它没有确切地说什么浏览器支持这个值(IE 6在我们的列表中支持)。
看起来,将colspan设置为大于您可能拥有的理论列数量的值是可行的,但如果您将表布局设置为fixed,则它将不起作用。对colspan使用一个大数字的自动布局有什么缺点吗?有更正确的方法吗?
我如何指定一个td标签应该跨越所有列(当表中的列的确切数量将是可变的/难以确定当HTML被呈现)?w3schools提到你可以使用colspan="0",但它没有确切地说什么浏览器支持这个值(IE 6在我们的列表中支持)。
看起来,将colspan设置为大于您可能拥有的理论列数量的值是可行的,但如果您将表布局设置为fixed,则它将不起作用。对colspan使用一个大数字的自动布局有什么缺点吗?有更正确的方法吗?
当前回答
CSS解决方案是理想的,但我无法找到一个,所以这里有一个JavaScript解决方案:对于具有给定类的tr元素,通过选择一个完整的行,计算其td元素及其colSpan属性,并使用el设置加宽的行来最大化它。colSpan = newcolspan;像这样…
var headertablerows = document.getElementsByClassName('max-col-span'); [].forEach.call(headertablerows, function (headertablerow) { var colspan = 0; [].forEach.call(headertablerow.nextElementSibling.children, function (child) { colspan += child.colSpan ? parseInt(child.colSpan, 10) : 1; }); headertablerow.children[0].colSpan = colspan; }); html { font-family: Verdana; } tr > * { padding: 1rem; box-shadow: 0 0 8px gray inset; } <table> <tr class="max-col-span"> <td>1 - max width </td> </tr> <tr> <td>2 - no colspan </td> <td colspan="2">3 - colspan is 2 </td> </tr> </table>
如果使用表头,可能需要调整这一点,但这应该是一种使用100%纯JavaScript的概念验证方法。
其他回答
就用这个吧:
colspan="100%"
它适用于Firefox 3.6, IE 7和Opera 11!(我猜在其他人身上,我无法尝试)
警告:正如下面评论中提到的,这实际上与colspan="100"相同。因此,这个解决方案将打破表与css table-layout:固定,或超过100列。
另一个可行但丑陋的解决方案:colspan="100",其中100是一个大于需要colspan的列总数的值。
根据W3C的规定,colspan="0"选项仅对COLGROUP标记有效。
colspan="100%"
它的工作也在电子邮件outlook, gmail....
作为部分答案,这里有关于问题中提到的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.
下面是一个简洁的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>