合并所有列

Question

如何指定一个 td 标签跨越所有列（当HTML被渲染时，表格中确切的列数会是不确定/难以确定的）？w3schools 提到可以使用 colspan="0"，但它没有明确说明哪些浏览器支持该值（我们需要支持IE 6）。

看起来将 colspan 设置为大于您可能拥有的理论列数的值将起作用，但如果您将 table-layout 设置为 fixed，则不起作用。使用具有大量 colspan 的自动布局是否有任何缺点？是否有更正确的方法来实现这一点？

- Bob

---

接受的答案是关于如何不这样做的，似乎有严重的性能/一致性问题。所以我想答案是：硬编码列数。我没有看到任何可行的替代方案。 - Andrew Koster

很好的问题，但如果没有一个答案是正确的，你应该不接受任何答案。 - HoldOffHunger

Answer 1

只需使用这个：

colspan="100%"

它可以在Firefox 3.6、IE 7和Opera 11上运行！（我想其他浏览器也可以，但我没试过）

---

警告：如下方的评论所述，这实际上与colspan="100"相同。 因此，这个解决方案对于具有CSS table-layout: fixed或超过100列的表将无效。

- Cluxter

---

在IE6-IE8、Chrome（PC和Mac）、Firefox 4.0（PC和Mac）以及Safari 5（PC和Mac）上进行了额外测试。 - hndcrftd

这个问题为什么还这么难懂？这应该在每个街角都大声呼喊！！！我已经在不同的时间里为这个可恶的colspan问题苦苦挣扎了相当长一段时间。 - hndcrftd

在Chrome和Firefox浏览器中，colspan="3%"的处理方式与colspan="3"完全相同。 - zpmorgan

@zpmorgan和@Sprog，你们是正确的！colspan="100%"的意思确实是colspan="100"。 - NemoStein

看到这个一致的跨浏览器解决方案，我非常高兴，但通过评论发现这实际上是一个具有欺骗性、不符合预期的解决方案:( 我认为它不应该比被接受的答案得到更多点赞=/ - Francisco

Answer 2

我有IE 7.0，Firefox 3.0和Chrome 1.0

在任何上述浏览器中，TD中的colspan =“0”属性不会跨越所有TD 。

也许不是适当的标记实践建议，但是如果您给出比其他行中可能的总列数更高的 colspan值，则TD将跨越所有列。

当table-layout CSS属性设置为固定时，此方法无效。

再次强调，这不是完美的解决方案，但在上述提到的三个浏览器版本中，当table-layout CSS属性为自动时，该方法似乎有效。

- Nahom Tijnam

---

如果您在html的开头指定了一个严格的doctype，Firefox 3将按照html 4.01规范要求呈现colspan。 - Eineki

我喜欢使用colspan="42"将整个区域合并。显然，对于大于42列的情况，这是一个问题，但这是我认可的为数不多的神奇数字之一。 - Martin

我强烈建议您将colspan设置为确切的数字。我在Firefox中遇到了一个严重的性能错误，花了一整天才找出来。如果一个任意大的colspan应用于带有“border-collapse:collapse”样式的大表格，它会使Firefox崩溃。我的表格有800行和8列，渲染需要5秒钟。通过正确设置colspan，现在可以在1秒内合理地渲染。 - InfinitiesLoop

我建议不要使用这种方法。在OSX上，Chrome返回了非常奇怪的结果（列重叠）。 - Tzach

在Chrome中发现另一个问题，如果您尝试为包含“超大”TD的TR元素添加边框，则右侧边框将不可见。 - Massimo

Answer 3

如果您想要创建一个跨越所有列的“标题”单元格作为表头，您可以使用caption标签（http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption）。这个元素就是为此目的而设计的。它的行为类似于div，但不会跨越表格父元素的整个宽度（像div在同一位置上会做的那样（不要在家里尝试！）），而是跨越整个表格的宽度。有一些与边框等相关的跨浏览器问题（对我来说是可以接受的）。无论如何，您可以将其制作成跨越所有列的单元格。在其中，您可以通过添加div元素来创建行。我不确定是否可以将其插入tr元素之间，但那可能是一个hack（所以不推荐）。另一个选择是玩弄浮动的div，但那很糟糕！

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

- Akira

---

正是我在寻找的，用于在数据表底部放置分页控件的方法。它完美地运行了。非常感谢你。 - Comencau

如果您想要跨越表格中所有列，例如在相关行组之间使用分组分隔符，则此方法将无法奏效。（Chrome） - David Hempy

Answer 4

以下是一些关于colspan="0"的部分答案，这个在问题中被提到。

简短版本：

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.

- Mark Amery

---

哈哈，我喜欢API功能很有用但却被完全删除的情况，只因没有人实现它们。这是惊人的过程。 - Andrew Koster

我刚在Firefox 116中测试了colspan="0"，但似乎它不支持colspan="0"。据我所知，目前还没有任何浏览器支持colspan="0"。 - Albert Wiersch

@AlbertWiersch 这是可以预料的 - 正如我在答案中指出的那样，它在十多年前就从 HTML 标准中删除了，并且根据 HTML 规范，colspan="0" 自那时起就已经被正式禁止使用。 - Mark Amery

Answer 5

对于IE 6，您需要将colspan设置为表格中列数的数量。如果有5列，则需要：colspan="5"。

原因在于IE以不同的方式处理colspan，它使用HTML 3.2规范：

IE实现了HTML 3.2的定义，将colspan=0设置为colspan=1。

这个错误已经有充分的文献记录。

- Gortok

---

列的数量可能是可变的，我会更新我的问题以包含这个备注。 - Bob

尽管顶部段落中的建议似乎合理，但我认为这里的许多细节并不完全正确。HTML 3.2规范指出colspan必须是正整数，这使得colspan=0是不合法的；它也没有明确规定将colspan=0处理为colspan=1（虽然我相信这实际上是IE 6的做法）。此外，该引文不再（？）出现在您链接到的论坛页面上，大多数谷歌搜索结果（现在？）都与完全不同的IE 6 colspan相关错误有关。 - Mark Amery

Answer 6

如果您正在使用jQuery（或不介意添加它），这将比所有这些hack更好地完成任务。

function getMaxColCount($table) {
    var maxCol = 0;

    $table.find('tr').each(function(i,o) {
        var colCount = 0;
        $(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) {
            var cc = Number($(oo).attr('colspan'));
            if (cc) {
                colCount += cc;
            } else {
                colCount += 1;
            }
        });
        if(colCount > maxCol) { 
            maxCol = colCount; 
        }
    });

    return maxCol;
}

为了简化实现，我会对需要调整的任何td/th进行类装饰，例如“maxCol”，然后我可以执行以下操作：

$('td.maxcols, th.maxcols').each(function(i,o) {
    $t = $($(o).parents('table')[0]); $(o).attr('colspan',  getMaxColCount($t));
});

如果您发现某个实现无法使用，请不要抨击答案，可以在评论中解释，我会进行更新以覆盖该情况。

- rainabba

---

如果您有一个纯JS版本，那就太好了。 - jpaugh

你是否有一个常见的用例缺乏$(选择器)支持或者不想使用它？ - rainabba

不需要。我只是好奇 jQuery 是否在这里添加了任何好处；它是一个相当庞大的先决条件，而且看起来它在这里只被最小程度地使用。 - jpaugh

很好。在jQuery和Angular之间，我很少没有这些工具，所以我默认使用它们。但现在我会把它留给别人来想出纯净版本。 - rainabba

由于jQuery有点过时了，我添加了一个es6版本/答案（不想用完全不同的代码更新这个答案）。 - Sjeiti

如果我正确理解了代码，它将为表中的每个单元格计算getMaxColCount()。这不太高效... - Nadav

Answer 7

以下是一个简明的es6解决方案（类似于Rainbabba's answer，但不使用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>

- Sjeiti

Answer 8

另一种可行但不美观的解决方案是：colspan="100"，其中100是大于你需要跨列的总列数的值。

根据W3C的规定，colspan="0"选项仅适用于COLGROUP标签。

- Raptor

---

colspan="100"（例如超出限制）在某些情况下可能会导致表格呈现非常奇怪（我将尝试寻找一些测试用例并发布URL）。 - scunliffe

-1因为据我所知，最后一段中的声明是错误的。HTML 4允许<td>具有colspan="0"（请参见https://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan），而HTML 5.0不允许在colgroup上使用span="0"（请参见https://www.w3.org/TR/html50/tabular-data.html#attr-colgroup-span，其中指出“span内容属性的值必须是有效的大于零的非负整数。”）。 - Mark Amery

W3schools实际上说colspan="0"只在Firefox中有效。 - AutoBaker

@5Diraptor永远不要相信w3schools。该网站充满了错误。请使用MDN代替。 - Raptor

Answer 9

只需将colspan设置为表格中的列数即可。

所有其他的“捷径”都有缺陷。

最好的方法是一开始就将colspan设置为正确的列数。如果您的表格有5列，请将其设置为colspan="5"，这是在所有情况下都有效的唯一方法。不，这并不是过时的解决方案，也不仅适用于IE6或任何其他情况--这实际上是处理此问题的最佳方式。

除非列数在运行时更改，否则不建议使用Javascript来解决此问题。

如果列数是可变的，那么您需要计算列数，以便可以填充colspan。如果您的列数是可变的，那么生成表格的任何内容都应该能够适应并同时计算表格的列数。

如其他回答所述，如果您的表格未设置为table-layout: fixed，则也可以将colspan设置为一个非常大的数字。但我认为这个解决方案很混乱，并且如果您稍后决定使用固定表格布局，则可能会造成麻烦。最好还是第一次就正确地做。

- Skeets

---

这应该是被接受的答案，其他建议使用更高的colspan的答案是误导性的，因为它们也会对屏幕阅读器造成问题。 - deltragon

Answer 10

我一直都是这样用的；如果不够，就增加数量。 （超出您认为会有的列数）

<td colspan='999'>

- Roberto Mutti