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 .

也许不推荐作为正确的标记练习,但如果你给出的colspan值高于总可能的值.在其他行中的列,然后TD将跨越所有列.

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

再一次,这不是完美的解决方案,但是当表格布局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

作为部分答案,这里有几点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中引用的措辞,并且一致同意colspan0的a是不允许的,这个措辞出现在所有三个规范中:

  所述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一般会因为网络开发人员的频繁不准确而被蔑视,那么请考虑这个原因.

Answer 5

对于IE 6,您需要将colspan与表中的列数相等.如果你有5列,那么你需要:colspan="5".

原因是IE处理colspans的方式不同,它使用HTML 3.2规范:

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

该错误已有详细记录.

Answer 6

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

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

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

最好的办法是colspan首先将 设定为正确的数字。如果您的表有 5 列，请将其设置为colspan="5"这是在所有情况下都有效的唯一方法。不，这不是一个过时的解决方案，也不是只推荐用于 IE6 或其他任何东西——这实际上是处理这个问题的最佳方法。

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

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

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

Answer 8

下面是一个简洁的 ES6 解决方案（类似于Rainbaba 的答案，但没有 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>
  <tbody>
    <tr>
      <td data-colspan-max>td will be set to full width</td>
    </tr>
  </tbody>
</table>

Answer 9

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

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