这里有人觉得为了这个看似微不足道的问题而深入到JS中似乎有点过分了吗?

纯CSS

繁荣!我有一个纯CSS解决方案为您提供!下面是一个例子，你只需要向你想要张成所有列的行添加一个类。然后CSS将使第一个<td>元素跨越全宽度，并隐藏其余的<td>元素。(你必须使用可见性:hidden;and NOT display:无;对于这个)。

注意:这个方法至少需要两个单元格才能很好地呈现，如果你保持<td>元素的正确数量，CSS将呈现得最好——不要删除任何元素来为span元素腾出空间。这将有助于确保单元格/行仍然正常运行。

例子

/* standard styling css */ table { border-collapse: collapse; } table, tr, td { border: 1px solid black; } td { padding: 3px; } /* make full width class span the whole table */ .full-span { position:relative; } .full-span > * { visibility: hidden; border:0; } .full-span > *:nth-child(1) { display: block; visibility: unset; position:absolute; } <table> <tbody> <tr> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> </tr> <tr class="full-span"> <td>B1 long text</td> <td>B2</td> <td>B3</td> <td>B4</td> </tr> <tr> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> </tr> <tr> <td>D1</td> <td>D2</td> <td>D3</td> <td>D4</td> </tr> </tbody> </table>

小贴士!

如果你用PHP/JS动态生成你的表，这可能会清理你的一些代码。假设您正在遍历一个2D数组以创建一个表:对于需要跨出所有列的每一行，您需要添加一些逻辑来计算列的数量，添加colspan属性，添加构成表的全宽度所需的任何剩余<td>元素，等等。

使用我的方法，您可以遍历所有列并输出它们，只需将类包含在父行中。

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

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

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的概念验证方法。

只是想补充我的经验并回答这个问题。 注意:它只在你有一个预定义的表和一个带有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;
    }
}

我有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>