下面是一个简洁的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>

colspan="100%"

它的工作也在电子邮件outlook, gmail....

我有IE 7.0, Firefox 3.0和Chrome 1.0

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

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

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

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

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>

下面是一个简洁的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>

就用这个吧:

colspan="100%"

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

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