html - Colspan 所有列

Question

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

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

Answer 1

只需使用这个：

colspan="100%"

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

---

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

Answer 2

我有 IE 7.0、Firefox 3.0 和 Chrome 1.0

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

也许不推荐作为正确的标记做法，但如果你给出的colspan 值高于可能的总数。其他行中的列，则 TD 将跨越所有列。

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

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

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 元素之间，但我猜这将是一个 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>

Answer 4

作为部分答案，这里有几点关于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 引用的措辞，并且一致同意 acolspan为 0是不允许的，在所有三个规范中都出现了这样的措辞：

  tdandth元素可以指定一个内容属性，其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 开发人员的蔑视，请考虑这是为什么。

Answer 5

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

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

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

该错误有据可查。

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

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

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

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

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>

Answer 9

只需设置colspan为表中的列数。

所有其他“捷径”都有陷阱。

最好的办法是一colspan开始就设置正确的数字。如果您的表格有 5 列，请将其设置为colspan="5"“这是唯一适用于所有场景的方法”。不，这不是一个过时的解决方案，或者只推荐用于 IE6 或任何东西——这实际上是处理这个问题的最佳方法。

我不建议使用 Javascript 来解决这个问题，除非列数在运行时发生变化。

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

正如其他答案所提到的，如果您的表格未设置为table-layout: fixed，您也可以设置colspan为一个非常大的数字。但是我发现这个解决方案很混乱，如果你稍后回来并决定它应该是一个固定的表格布局，这可能会让人头疼。最好只是第一次正确地做。

Answer 10

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>

如果您使用的是 table headers，您可能需要对此进行调整，但这应该提供一种使用100% 纯 JavaScript 的概念验证方法。

Answer 11

只是想添加我的经验和答案。
注意：它仅在您有一个预定义的table和一个trwith 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;
    }
}