我如何指定一个td标签应该跨越所有列(当表中的列的确切数量将是可变的/难以确定当HTML被呈现)?w3schools提到你可以使用colspan="0"，但它没有确切地说什么浏览器支持这个值(IE 6在我们的列表中支持)。
看起来，将colspan设置为大于您可能拥有的理论列数量的值是可行的，但如果您将表布局设置为fixed，则它将不起作用。对colspan使用一个大数字的自动布局有什么缺点吗?有更正确的方法吗?
当前回答
下面是一个简洁的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>
其他回答
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的概念验证方法。
对于IE 6，你会希望colspan等于表中的列数。如果你有5列，那么你需要:colspan="5"。
原因是IE处理colspan的方式不同，它使用HTML 3.2规范:
IE实现了HTML 3.2的定义，它将colspan=0设置为colspan=1。
这个bug有很好的文档记录。
只需将colspan设置为表中的列数。
所有其他的“捷径”都有陷阱。
最好的方法是在开始时将colspan设置为正确的数字。如果您的表有5列，则将其设置为colspan="5"，这是在所有场景中都有效的唯一方法。不，这不是一个过时的解决方案，也不是只推荐用于IE6之类的——这实际上是处理这个问题的最佳方式。
我不建议使用Javascript来解决这个问题，除非在运行时列的数量发生了变化。
如果列数是可变的，则需要计算列数，以便填充colspan。如果您的列数是可变的，那么无论生成表的是什么，都应该能够适应于计算表的列数。
正如其他答案所提到的，如果您的表没有设置为table-layout: fixed，您也可以将colspan设置为一个非常大的数字。但我发现这个解决方案很混乱，如果你稍后回来决定它应该是一个固定的表格布局，这可能会让你头疼。最好第一次就做对了。
我有IE 7.0, Firefox 3.0和Chrome 1.0
一个TD中的colspan="0"属性不会跨越任何上述浏览器中的所有TD。
可能不推荐作为适当的标记实践，但如果您给出的colspan值高于可能的总no。那么TD就张成了所有的列。
当表格布局CSS属性被设置为fixed时，这将不起作用。
再说一次，这不是完美的解决方案，但在上面提到的3个浏览器版本中，当表布局CSS属性是自动的时候，这似乎是有效的。
下面是一个简洁的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>
