Colspan所有列

Question

我怎么能指定一个 td 标记应该跨越所有列(当时的确切数额列在表中将变量/难以确定当HTML正在呈现的)? w3schools 提到的可以使用 colspan="0", 但它没有说什么浏览器的支持，值(即6个是在我们的列表以支持)。

看来，设置 colspan 一个值大于理论上的数额列为你可能已经将工作，但它不会工作如果你有 table-layout 设置 fixed.是否有任何缺点使用一种自动的布局有一个大号 colspan?是否有更多的正确方法这样做？

Answer 1

我有IE 7.0，火狐3.0和Chrome 1.0

在合并单元格= “0” 在TD的属性是不会跨越横跨所有TD的任何上述浏览器的

也许不推荐，因为适当的标记的做法，但如果你给一个高合并单元格高于总可能没有价值。在其它行的列，然后在TD将跨越所有列。

<强>当表格的布局CSS属性被设置为固定的，这并不工作。

再一次，这不是完美的解决方案，但似乎在上面提到的3个浏览器版本的工作表时，布局CSS属性的自动的。希望这有助于。

Answer 2

只要使用这样的：

colspan="100%"

它适用于火狐3.6，IE 7和Opera 11！ （我猜别人，我不能尝试）

---

警告：如在下面这个评价中提到实际上是一样的colspan="100"。因此，该解决方案将打破用于CSS table-layout: fixed，或超过100个列的表。

Answer 3

如果你想要做一个"标题"的小区，跨越所有列，作为标题为你的桌子，你可能想要使用的标题标记(http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)这个元素是用于这一目的。它的行为就像一个div，但不跨越整个宽度的母体桌(如div会做同样的地位(不试试这个在家里！)), 相反，它跨越宽度表。有一些跨浏览器问题与边界，诸如(很可接受的对我)。不管怎么说，你可以把它看作一个细胞，跨越所有列。内，可以行使通过增加div元素。我不知道如果你能把它插入之间的tr-要素，但这将是一个破解我猜(所以不建议).另一个选择就是瞎搞浮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>

Answer 4

有关IE 6，你要平等合并单元格的列在表中的号码。如果你有5列，那么你会想：colspan="5"

原因在于， IE处理colspans 的不同，它使用HTML 3.2规范：

  

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

在错误是以及记录。

Answer 5

如果您正在使用jQuery（或不介意将它添加），这将完成这项工作比任何这些黑客的更好。

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 /日我需要与类如“MAXCOL”那么我可以执行以下调整：

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

如果你觉得这不会为工作，不踩住了答案，在注释中解释，我会更新，如果它可以覆盖的实现。

Answer 6

作为部分答案，这里有几点 colspan="0", ，问题中提到了这一点。

TL;博士版本：

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"，它有特殊的含义...[It] 告诉浏览器将单元格跨越到列组 (colgroup) 的最后一列

  和

  HTML 4.01 和 HTML5 之间的差异

  没有任何。

  如果您还没有意识到 W3Schools 因其频繁的错误而普遍受到 Web 开发人员的蔑视，请将此视为一个教训。

Answer 7

另一个工作但丑陋的解决方案：colspan="100"，其中100是一个值比你需要colspan合计列更大的

根据W3C，所述colspan="0"选项仅对与COLGROUP标签

Answer 8

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