Colspan所有列

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

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

古一2020/03/23 14:12:09

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

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

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

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

西里阿飞2020/03/23 14:12:09

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

卡卡西路易前端2020/03/23 14:12:09

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

顺便说一句,无论是否定义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

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

泡芙2020/03/23 14:12:09

只是想补充我的经验并对此做出回答。
注意:仅当您具有预定义的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;
    }
}
村村小卤蛋2020/03/23 14:12:09

另一个可行但难看的解决方案:colspan="100"其中100的值大于所需的总列数colspan

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

Green小卤蛋2020/03/23 14:12:08

作为部分回答,以下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 (made a candidate recommendation back in 2012), the WhatWG HTML living standard (the dominant standard today), and the latest W3 HTML 5 spec all do not contain the wording quoted from HTML 4 above, and unanimously agree that a colspan of 0 is not allowed, with this wording which appears in all three specs:

    The td and th elements may have a colspan content attribute specified, whose value must be a valid non-negative integer greater than zero ...

    Sources:

  • 问题链接到W3Schools页面的以下声明至少在当今是完全错误的:

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

    HTML 4.01和HTML5之间的差异

    没有。

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

JinJin卡卡西2020/03/23 14:12:08

我有IE 7.0,Firefox 3.0和Chrome 1.0

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

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

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

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

老丝2020/03/23 14:12:08

如果要创建一个跨越所有列的“标题”单元格作为表格标题,则可能要使用标题标记(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周围弄乱,但这真是太糟糕了!

<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>
Stafan猿2020/03/23 14:12:08

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

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

IE实现HTML 3.2定义,将其设置colspan=0colspan=1

该错误已得到充分记录

2020/03/23 14:12:08

只需使用此:

colspan="100%"

它可以在Firefox 3.6,IE 7和Opera 11上运行!(我猜想其他人,我无法尝试)


警告:正如在下面的评论中提到的,这实际上与相同colspan="100"因此,对于css table-layout: fixed或100列以上的表,此解决方案将失效