Colspan所有专栏

如何指定td标记应跨越所有列(当表格中的列的确切数量可变/难以确定何时呈现HTML)？w3schools提到你可以使用colspan="0",但它没有说明究竟是什么浏览器支持这个值(IE 6在我们的列表中支持).

看起来设置colspan为大于您可能具有的理论列数的值将起作用,但如果您table-layout设置为,它将不起作用fixed.使用大量自动布局有什么缺点colspan吗？有没有更正确的方法呢？

1> 小智..：

---

只要用这个:

colspan="100%"

它适用于Firefox 3.6,IE 7和Opera 11!(我想其他人,我无法尝试)

---

警告:如下面的评论所述,这实际上是相同的colspan="100".因此,对于具有css table-layout: fixed或超过100列的表,此解决方案将中断.

---

@zpmorgan和@Sprog,你是对的!`colspan ="100%"`的意思是'colspan ="100"`.

---

大声笑,我很高兴终于看到这个问题的一致的跨浏览器解决方案,只是通过评论发现这确实是一个欺骗性的不工作预期的一个:(我认为它不值得更多的upvotes比接受的答案= /

---

在chrome和firefox上,colspan ="3%"的处理方式与colspan ="3"相同.

---

在IE6中测试[另外] - IE8,Chrome [在PC和Mac],Firefox 4.0 [PC和Mac],Safari 5 [PC和Mac]

---

这又如何模糊不清？这应该在每个街角大喊!我已经在不同的时间在这个该死的colspan问题上苦苦挣扎了很长一段时间

---

@JonathanDay:它在语义上根本不正确,它在语义上绝对具有误导性.它意味着与它看起来完全不同的东西.它几乎混淆了正在发生的事情并且它在*某些*情况下工作(`table-layout:automatic` only)并没有使它变得更好.

---

@zpmorgan因此我们假设100%与100相同,因此只能正常工作,因为上面的答案？

---

@Francisco然而100%在语义上更正确,所以它运作的机制可能不那么重要？当然,除非您碰巧有一个> 100列(ouch)的表.

---

在chrome中，当设置colspan ='100％'时，我松开表格的右边框

---

我已经使用过这种方法,也从来不知道它意味着100列,并且%被有效地忽略了.我认为如果浏览器确实实现了这一点会很棒,所以我将坚持使用100%.另外,我想如果你有一个超过100列的表,那么你手上还有另一个问题:)

---

@jamiebarrow我认为你是对的.如果您通过HTML5验证程序运行此构造,则会报告存在'%'作为错误.该规范似乎很清楚,它不应该在那里:http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#attr-tdth-colspan

2> Nahom Tijnam..：

---

我有IE 7.0,Firefox 3.0和Chrome 1.0

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

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

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

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

---

我是'colspan ="42"的粉丝,可以跨越整个范围.显然这是一个> 42列的问题,但它是我赞同的少数神奇数字之一.

---

我强烈建议你把colspan = <完全正确的数字>.我刚刚在Firefox中遇到了一个巨大的性能错误,我花了一整天才弄明白.一个任意大的colspan将使FF蜷缩在一个边界崩溃的大桌子上:崩溃.我的表有800行和8列,需要5秒才能渲染.使用正确的colspan,它会回落到合理的1秒钟.https://bugzilla.mozilla.org/show_bug.cgi?id=675417

---

我建议不要使用此方法。刚从OSX上的Chrome获得了非常奇怪的结果（列相互重叠）。

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,但这是糟糕的!

做

别

---

如果您想跨越表中间的所有列,则这不起作用.例如,在相关行组之间按分隔符分组.(铬)

4> Mark Amery..：

---

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

tl;博士版:

colspan="0"在任何浏览器中都不起作用.W3Schools错了(像往常一样).HTML 4表示colspan="0"应该导致列跨越整个表,但是没有人实现这一点,并且在HTML 4之后它已从规范中删除.

更多细节和证据:

所有主流浏览器都将其视为等同于colspan="1".

这是一个展示这个的演示; 在你喜欢的任何浏览器上试试吧.

td {
  border: 1px solid black;
}

  

    
ay
    
bee
    
see
  
  

    
colspan="0"
  
  

    
colspan="1"
  
  

    
colspan="3"
  
  

    
colspan="1000"
  

5> George Stock..：

---

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

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

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

该错误已有详细记录.

6> rainabba..：

---

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

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