跨所有列

我有IE7.0,火狐3.0和Chrome1.0

td中的colspan=“0”属性是 不跨越 在所有的TDS中 上述任何浏览器 .

可能不建议将其作为适当的标记实践,但如果 列范围值高于其他行中可能的列总数 ,那么td将跨越所有列。

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

同样,当表布局css属性为 自动的 . 希望这有帮助。

只要用这个:

colspan="100%"

它适用于火狐3.6,IE 7和Opera 11!(我猜其他人,我不能尝试)

警告:正如下面的注释所述,这实际上与 colspan="100" . 因此,对于使用CSS的表,此解决方案将中断。 table-layout: fixed 或超过100列。

如果要将跨越所有列的“标题”单元格作为表的标题,则可以使用标题标记( http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption )此元素用于此目的。它的行为类似于DIV,但不跨越表父级的整个宽度(就像DIV在同一位置所做的那样(不要在家中尝试!)相反,它跨越表的宽度。有一些跨浏览器的边界问题,这样(我可以接受)。无论如何,您可以使它看起来像一个跨越所有列的单元格。在中,可以通过添加DIV元素来创建行。我不确定是否可以将它插入到tr元素之间,但我想这是一个黑客攻击(所以不推荐)。另一个选择是摆弄漂浮的沙发床,但那是糟糕的!

做

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

对于IE6,您需要将colspan等于表中的列数。如果有5列,则需要: colspan="5" .

原因是 IE handles colspans 不同的是,它使用HTML 3.2规范:

IE实现HTML3.2定义,它设置 colspan=0 作为 colspan=1 .

错误是 well documented .

如果您使用的是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));
});

如果你发现一个不适用的实现,不要急着回答,在评论中解释,如果可以的话,我会更新的。

作为部分答案,这里有几个要点 colspan="0" ,在问题中提到。

DR版本:

CalSn=“0” 在任何浏览器中都不工作。W3学校是错误的(和往常一样)。HTML 4说 CalSn=“0” 应该会导致一列跨越整个表,但是没有人实现这个,并且它在HTML4之后被从规范中删除。

更多细节和证据:

• 所有主要浏览器都将其视为等同于 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 那个 CalSn=“0” 应视为跨越所有列:

  值零(“0”)表示单元格跨越从当前列到定义单元格的列组(colgroup)的最后一列的所有列。

  然而,大多数浏览器从未实现过这一点。

• HTML 5.0(在2012年提出了一个候选建议)、Whatwg HTML生活标准(今天的主要标准)和最新的W3 HTML 5规范均不包含上述HTML 4中引用的措辞,并且一致同意 colspan 不允许使用0,在所有三个规范中都出现了此措辞:

  这个 td 和 th 元素可以具有 科尔斯潘 指定的内容属性,其值必须是大于零的有效非负整数…

  资料来源:

  • 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之间的差异

  一个也没有。

  如果您还没有意识到w3school通常因其经常出现的错误而受到Web开发人员的轻蔑,请将这一点作为一个教训来说明原因。

另一个有效但丑陋的解决方案: colspan="100" ,其中100是大于所需列总数的值 colspan .

根据W3C的规定, colspan="0" 选项仅对有效 COLGROUP 标签。

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

只是想增加我的经验并回答这个问题。
注意:只有当您有一个预定义的 table 和A tr 具有 th 但正在动态地加载到行中(例如通过Ajax)。

在这种情况下,您可以计算 钍 's在您的第一个标题行中,并使用它横跨整个列。

当您希望在未找到结果的情况下中继消息时,可能需要这样做。

在jquery中是这样的,其中 桌子 您的输入表是:

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

根据规范 colspan="0" 应导致表宽td。

但是,只有当您的表有宽度时,这才是正确的!表格可以包含不同宽度的行。所以,渲染器知道表的宽度的唯一情况是 定义colgroup !否则,colspan=“0”的结果是不可确定的…

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

我不能在旧的浏览器上测试它,但这是规范的一部分,因为4.0…

也许我是个直截了当的思考者,但我有点困惑,你不知道你桌子的列号吗?

顺便说一句,IE6不支持colspan=“0”,不管是否定义了colgroup。 我还尝试使用thead和th来生成列组,但是浏览器不会重新指定colspan=“0”表单。

我在Windows和Linux上尝试了火狐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

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

我也有同样的问题——如何解决我的问题……把你想要跨越的所有控制放在一个TD中

尝试使用“colspan”而不是“colspan”。我喜欢驼背式的…