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"相同。因此，对于包含css table-layout: fixed或超过100列的表，此解决方案将中断。

Answer 2

我有IE 7.0，Firefox 3.0和Chrome 1.0

TD中的colspan =“0”属性在上述任何浏览器中的所有TD上 NOT spanning 。

也许不建议作为正确的标记练习，但是如果你给出更高的colspan值而不是总可能的no。其他行中的列，然后TD将跨越所有列。

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

再一次，这不是一个完美的解决方案，但是当表格布局CSS属性是自动时，它似乎适用于上述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元素之间插入它，但我认为这是一个黑客攻击（所以不推荐）。另一种选择是乱搞浮动的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，您需要将colspan与表中的列数相等。如果您有5列，那么您需要：colspan="5"。

原因是IE handles colspans不同，它使用HTML 3.2规范：

  

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

错误是well documented。

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;

}

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

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

如果你找到一个不适用的实现，请不要抨击答案，在评论中解释，如果可以覆盖，我会更新。

Answer 6

作为部分答案，以下是有关问题中提到的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规范（现在已经过时了，但是在提出该问题时才是最新的）did indeed say 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

• the W3Schools page linked to in the question的以下声明至少在当今是完全错误的：

    

  仅Firefox支持colspan =“ 0”，它具有特殊含义... [它告诉浏览器将单元格跨到列组（colgroup）的最后一列

  和

    

  HTML 4.01和HTML5之间的区别

       

  无。

  如果您还不知道W3Schools通常因其频繁的错误而被Web开发人员所鄙视，请考虑这是为什么的一课。

Answer 7

另一个有效但难看的解决方案：colspan="100"，其中100的值大于colspan所需的总列数。

根据W3C，colspan="0"选项仅对COLGROUP代码有效。

Answer 8

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

Answer 9

一个CSS解决方案是理想的，但是我找不到一个解决方案，因此这里是一个JavaScript解决方案：对于具有给定类的tr元素，通过选择整行并计算其{{ 1}}元素及其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>，则可能需要对此进行调整，但这应该提供使用 100％纯JavaScript的概念验证方法。

Answer 10

只想添加我的经验并回答这个问题 注意：它只适用于预定义的table和tr th的情况，但会动态加载到您的行中（例如通过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;
    }
}

Answer 11

根据规范colspan="0"应该得到表格宽度td。

然而，只有当你的桌子有宽度时才会这样！表可以包含不同宽度的行。因此，如果您定义一个colgroup ，渲染器知道表格宽度的唯一情况！否则，colspan的结果=＆＃34; 0＆＃34;是不确定的......

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

我无法在旧浏览器上测试它，但这是规范的一部分，因为4.0 ...

Answer 12

也许我是一个直率的思想家，但我有点疑惑，你不知道你的桌子的列号吗？

顺便说一句，IE6不支持colspan =“0”，无论是否定义了colgroup。 我还尝试使用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

编辑：请复制并粘贴链接，格式化不会接受链接中的双重协议部分（或者我不能很好地正确格式化它）。

Answer 13

我遇到了同样的问题 - 我如何解决我的问题..将你想要的任何控件放在一个td

Answer 14

在表格单元格中使用colspan =“ 100％”，它可以正常工作。

colspan="100%"

Answer 15

尝试使用“colSpan”而不是“colspan”。 IE喜欢camelBack版本......