Colspan所有列

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

似乎设置colspan为大于您可能具有的理论列数的值将是可行的，但如果将其table-layout设置为，则它将不起作用fixed。使用大量的自动版式是否有任何弊端colspan？有更正确的方法吗？

我有IE 7.0，Firefox 3.0和Chrome 1.0

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

可能不建议您将其作为正确的标记做法，但是如果您提供的colspan值比可能的总和更高。列中的其他行，则TD会覆盖所有列。

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

再次，这不是完美的解决方案，但似乎工作在上述3个版本的浏览器时，表格的布局CSS属性是自动的。希望这可以帮助。

只需使用此：

colspan="100%"

它可以在Firefox 3.6，IE 7和Opera 11上运行！（我猜想其他人，我无法尝试）

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

如果要创建一个跨越所有列的“标题”单元格作为表格标题，则可能要使用标题标记（http://www.w3schools.com/tags/tag_caption.asp / https：// developer.mozilla.org/zh-CN/docs/Web/HTML/Element/caption）此元素就是为此目的而设计的。它的行为类似于div，但不会跨越表父级的整个宽度（就像div会在同一位置（不要在家中尝试！）），而是跨过表的宽度表。边界存在一些跨浏览器的问题（对于我来说是可以接受的）。无论如何，您可以使其看起来像一个跨越所有列的单元格。在其中，您可以通过添加div-elements创建行。我不确定是否可以在tr元素之间插入它，但是我猜那是一个hack（所以不推荐）。另一个选择是将div与浮动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>

作为部分回答，以下colspan="0"是有关问题的几点要点。

tl; dr版本：

colspan="0"在任何浏览器中均不起作用。W3Schools是错误的（照常）。HTML 4表示colspan="0"应该导致一列覆盖整个表，但是没有人实现这一点，因此在HTML 4之后将其从规范中删除。

一些更多的细节和证据：

• 所有主流浏览器都将其等同于 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引用的措辞，并且一致同意 colspan为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”，它具有特殊含义... [它]告诉浏览器将单元格跨到列组（colgroup）的最后一列

  和

  HTML 4.01和HTML5之间的差异

  没有。

  如果您尚未意识到W3Schools通常因其频繁的错误而被Web开发人员所鄙视，请考虑为什么这是一个教训。

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

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

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

该错误有据可查。

如果您使用的是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;

}

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

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

如果您发现无法实现的实现，请不要大惊小怪，在评论中进行解释，如果可以解决，我将进行更新。

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

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

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

只想补充我的经验并对此做出回答。
注意：仅当您具有预定义的table和且tr带有ths，但要动态加载行（例如通过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;
    }
}

也许我是一个直率的思想家，但我有点困惑，您不知道表格的列号吗？

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

我已经在Windows和Linux上使用Firefox 3.0进行了尝试，并且仅适用于严格的doctype。

您可以在以下几个Bowser上检查测试

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

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

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

根据规格 colspan="0"应产生一个表格宽度td。

但是，仅当您的桌子有宽度时才如此！表格可以包含不同宽度的行。因此，只有定义了colgroup，渲染器才知道表格的宽度！否则，colspan =“ 0”的结果是不确定的...

http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan

我无法在较旧的浏览器上对其进行测试，但这是从4.0版开始的规范的一部分...

尝试使用“ colSpan”代替“ colspan”。IE喜欢camelBack版本...