Html Colspan 所有列

Colspan all columns

提问by Bob

How can I specify a tdtag should span all columns (when the exact amount of columns in the table will be variable/difficult to determine when the HTML is being rendered)? w3schoolsmentions you can use colspan="0", but it doesn't say exactly what browsers support that value (IE 6 is in our list to support).

如何指定td标签应跨越所有列（当表中的确切列数可变/难以确定何时呈现 HTML）？w3schools提到您可以使用colspan="0"，但它并没有确切说明哪些浏览器支持该值（IE 6 在我们的支持列表中）。

It appears that setting colspanto a value greater than the theoretical amount of columns you may have will work, but it will not work if you have table-layoutset to fixed. Are there any disadvantages to using an automatic layout with a large number for colspan? Is there a more correct way of doing this?

似乎设置colspan为大于您可能拥有的理论列数的值会起作用，但如果您table-layout设置为fixed. 使用大量 for 的自动布局有什么缺点colspan吗？有没有更正确的方法来做到这一点？

采纳答案by Nahom Tijnam

I have IE 7.0, Firefox 3.0 and Chrome 1.0

我有 IE 7.0、Firefox 3.0 和 Chrome 1.0

The colspan="0" attribute in a TD is NOT spanningacross all TDs in any of the above browsers.

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

Maybe not recommended as proper markup practice, but if you give a higher colspan value than the total possible no. of columns in other rows, then the TD would span all the columns.

也许不推荐作为适当的标记实践，但如果您给出的colspan 值高于可能的总数。其他行中的列，则 TD 将跨越所有列。

This does NOT work when the table-layout CSS property is set to fixed.

当 table-layout CSS 属性设置为 fixed 时，这不起作用。

Once again, this is not the perfect solution but seems to work in the above mentioned 3 browser versions when the table-layout CSS property is automatic. Hope this helps.

再一次，这不是完美的解决方案，但当 table-layout CSS 属性为automatic时，这似乎适用于上述 3 个浏览器版本。希望这可以帮助。

回答by Cluxter

Just use this:

只需使用这个：

colspan="100%"

It works on Firefox 3.6, IE 7 and Opera 11! (and I guess on others, I couldn't try)

它适用于 Firefox 3.6、IE 7 和 Opera 11！（我猜在其他人身上，我无法尝试）

---

---

Warning: as mentioned in the comments below this is actually the same as colspan="100". Hence, this solution will break for tables with css table-layout: fixed, or more than 100 columns.

警告：正如在下面的评论中提到的，这实际上与colspan="100". 因此，对于带有 csstable-layout: fixed或超过 100 列的表，此解决方案将中断。

回答by Nahom Tijnam

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!

如果您想制作一个跨越所有列的“标题”单元格，作为表格的标题，您可能需要使用标题标签 ( http://www.w3schools.com/tags/tag_caption.asp/ https:// developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) 此元素用于此目的。它的行为类似于 div，但不会跨越表的父级的整个宽度（就像 div 在相同位置所做的一样（不要在家里尝试！）），相反，它跨越了表的宽度桌子。有一些跨浏览器的边界问题等（对我来说是可以接受的）。无论如何，您可以使它看起来像一个跨越所有列的单元格。在其中，您可以通过添加 div 元素来创建行。我不确定您是否可以将它插入 tr-elements 之间，但我猜这将是一个黑客（所以不推荐）。另一种选择是搞乱浮动 div，但这太糟糕了！

Do

做

<table>
    <caption style="gimme some style!"><!-- Title of table --></caption>
    <thead><!-- ... --></thead>
    <tbody><!-- ... --></tbody>
</table>

Don't

别

<div>
    <div style="float: left;/* extra styling /*"><!-- Title of table --></div>
    <table>
        <thead><!-- ... --></thead>
        <tbody><!-- ... --></tbody>
    </table>
    <div style="clear: both"></div>
</div>

回答by Mark Amery

As a partial answer, here's a few points about colspan="0", which was mentioned in the question.

作为部分答案，这里有几点关于colspan="0"，在问题中提到过。

tl;dr version:

tl;博士版本：

colspan="0"doesn't work in any browser whatsoever. W3Schools is wrong (as usual). HTML 4 said that colspan="0"should cause a column to span the whole table, but nobody implemented this and it was removed from the spec after HTML 4.

colspan="0"在任何浏览器中都不起作用。W3Schools 是错误的（像往常一样）。HTML 4 说这colspan="0"应该导致一列跨越整个表格，但没有人实现这一点，它在 HTML 4 之后从规范中删除。

Some more detail and evidence:

更多细节和证据：

• 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) didindeed saythat 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 colspanof 0 is not allowed, with this wording which appears in all three specs:

  The tdand thelements may have a colspancontent 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 questionare - 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.

• 所有主要浏览器都将其视为等同于colspan="1".

  这是一个演示，展示了这一点；在您喜欢的任何浏览器上尝试。

  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>

• 在HTML 4规范（现在陈旧过时，但目前的回来时，这个问题被问）也确实说的是colspan="0"应该为跨越所有列进行处理：

  值零（“0”）表示单元格跨越从当前列到定义单元格的列组 (COLGROUP) 的最后一列的所有列。

  但是，大多数浏览器从未实现过这一点。

• HTML 5.0（早在 2012 年就提出了候选推荐）、WhatWG HTML 生活标准（今天的主导标准）和最新的 W3 HTML 5 规范都没有包含上面引用的 HTML 4 的措辞，并且一致同意 a colspanof 0不允许，以下措辞出现在所有三个规范中：

  所述td和th元素可具有colspan指定的内容属性，其值必须是有效的非负整数大于零...

  资料来源：

  • 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

• 问题中链接到的 W3Schools 页面中的以下声明- 至少现在 - 完全错误：

  只有 Firefox 支持 colspan="0"，有特殊含义... [It] 告诉浏览器将单元格跨到列组（colgroup）的最后一列

  和

  HTML 4.01 和 HTML5 之间的差异

  没有任何。

  如果您还没有意识到 W3Schools 通常因其经常不准确而受到 Web 开发人员的蔑视，请考虑这是一个原因。

回答by George Stocker

For IE 6, you'll want to equal colspan to the number of columns in your table. If you have 5 columns, then you'll want: colspan="5".

对于 IE 6，您需要将 colspan 等于表中的列数。如果您有 5 列，那么您将需要：colspan="5".

The reason is that IE handles colspansdifferently, it uses the HTML 3.2 specification:

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

IE implements the HTML 3.2 definition, it sets colspan=0as colspan=1.

IE 实现了 HTML 3.2 定义，它设置colspan=0为colspan=1.

The bug is well documented.

该错误有据可查。

回答by rainabba

If you're using jQuery (or don't mind adding it), this will get the job done better than any of these hacks.

如果您正在使用 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;

}

To ease the implementation, I decorate any td/th I need adjusted with a class such as "maxCol" then I can do the following:

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

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

If you find an implementation this won't work for, don't slam the answer, explain in comments and I'll update if it can be covered.

如果您发现此实现不起作用，请不要抨击答案，在评论中解释，如果可以覆盖，我会更新。

回答by Raptor

Another working but ugly solution : colspan="100", where 100 is a value larger than total columns you need to colspan.

另一个有效但丑陋的解决方案：colspan="100"其中 100 是一个大于您需要的总列数的值colspan。

According to the W3C, the colspan="0"option is valid only with COLGROUPtag.

根据 W3C，该colspan="0"选项仅对COLGROUP标签有效。

回答by Sjeiti

Below is a concise es6 solution (similar to Rainbabba's answerbut without the jQuery).

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

回答by skiwi

Just want to add my experience and answer to this.
Note: It only works when you have a pre-defined tableand a trwith ths, but are loading in your rows (for example via AJAX) dynamically.

只是想添加我的经验并回答这个问题。
注意：它只在你有一个预定义的table和一个trwith ths时才有效，但是在你的行中动态加载（例如通过 AJAX）。

In this case you can count the number of th's there are in your first header row, and use that to span the whole column.

在这种情况下，您可以计算th第一个标题行中's的数量，并使用它来跨越整列。

This can be needed when you want to relay a message when no results have been found.

当您想在未找到任何结果的情况下中继消息时，可能需要这样做。

Something like this in jQuery, where tableis your input table:

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

回答by Eineki

Maybe I'm a straight thinker but I'm a bit puzzled, don't you know the column number of your table?

也许我是个直率的思考者，但我有点困惑，你不知道你表的列号吗？

By the way IE6 doesn't honor the colspan="0", with or without a colgroup defined. I tried also to use thead and th to generate the groups of columns but the browser doesn't recognlise the form colspan="0".

顺便说一下，IE6 不支持 colspan="0"，无论是否定义了 colgroup。我还尝试使用 thead 和 th 来生成列组，但浏览器无法识别 colspan="0" 形式。

I've tried with Firefox 3.0 on windows and linux and it works only with a strict doctype.

我已经在 windows 和 linux 上尝试过 Firefox 3.0，它只适用于严格的文档类型。

You can check a test on several bowser at

您可以在几个 bowser 上检查测试

http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

I found the test page here http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

我在这里找到了测试页面http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Edit: Please copy and paste the link, the formatting won't accept the double protocol parts in the link (or I am not so smart to correctly format it).

编辑：请复制并粘贴链接，格式不接受链接中的双协议部分（或者我不太聪明，无法正确格式化）。