Colspan所有列

我如何指定td标签应该跨越所有列(当表中的列的确切数量将是可变的/难以确定当HTML被呈现时)?w3schools提到你可以使用colspan="0"，但它没有确切地说明哪些浏览器支持该值(IE 6在我们的列表中支持)。

似乎将colspan设置为大于你可能拥有的理论列数的值将会起作用，但如果你将table-layout设置为fixed，它将不起作用。对colspan使用带有大数字的自动布局有什么缺点吗?有更正确的方法吗?

375052 次浏览
小开

对于IE 6，你会希望colspan等于表中的列数。如果你有5列，那么你将需要:colspan="5"。

原因是IE处理colspan不同，它使用HTML 3.2规范:

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

这个错误是良好的文档记录。

小开
最佳答案

我有IE 7.0, Firefox 3.0和Chrome 1.0

一个TD中的colspan="0"属性在以上任何一种浏览器中的所有TD中都是没有跨越。

可能不推荐作为适当的标记实践，但如果您给出colspan值大于可能的总no。其它行中的列，那么TD将跨越所有列。

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

同样，这不是完美的解决方案，但似乎在上面提到的3个浏览器版本中，当表布局CSS属性为自动时。希望这能有所帮助。

小开

如果你想要创建一个“title”单元格来覆盖所有列，作为你表格的标题，你可能想要使用标题标签(http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)这个元素就是为了这个目的。它的行为像一个div，但不跨越表的父节点的整个宽度(就像div在相同位置所做的那样(不要在家里尝试这个!))，相反，它跨越表的宽度。有一些跨浏览器的边界问题(对我来说是可以接受的)。不管怎样，你可以让它看起来像一个跨越所有列的单元格。在内部，您可以通过添加div元素来生成行。我不确定你是否可以在tr元素之间插入它，但这将是一个hack我猜(所以不建议)。另一个选择是使用浮动divs，但这太恶心了!

做

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

另一个可行但丑陋的解决方案:colspan="100"，其中100是一个大于你需要colspan的总列的值。

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

小开

就用这个吧:

colspan="100%"

它适用于Firefox 3.6, IE 7和Opera 11!(我猜在其他人身上，我无法尝试)

警告:正如下面注释中提到的，这实际上与colspan="100"相同。因此，这个解决方案将打破css table-layout: fixed表，或超过100列。

小开

只是想补充我的经验和答案 注意:它只在你有预定义的table和带有ths的tr时有效，但是在你的行中动态加载(例如通过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;
}
}
小开

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

为了简化实现，我用一个类来装饰我需要调整的td/th，比如“maxCol"然后我可以做以下事情:

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

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

小开

作为部分答案，下面是关于问题中提到的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>
    李< / p > < / >
  • HTML 4规范(现在已经过时了，但在提出这个问题时仍然存在)did< em> indeed say认为colspan="0"应该被视为跨越所有列:

    值0(“0”)意味着单元格跨越从当前列到定义单元格的列组(COLGROUP)的最后一列的所有列。

    然而，大多数浏览器从未实现此功能

  • HTML 5.0(在2012年提出了候选建议)，WhatWG HTML生活标准(今天的主导标准)，以及最新的W3 HTML 5规范都不包含上面引用的HTML 4的措辞，并一致同意colspan为0是不允许的，这一措辞出现在所有三个规范中:

    td和th元素可以指定colspan内容属性，其值必须是大于0的有效非负整数…

    来源:

小开

下面是一个简洁的es6解决方案(类似于Rainbabba的回答，但没有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>

小开

一个CSS解决方案将是理想的，但我无法找到一个，所以这里有一个JavaScript解决方案:对于一个具有给定类的tr元素，通过选择一个完整的行，计算其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>

如果你使用表headers，你可能需要调整它，但这应该会给出一个使用100%纯JavaScript。的概念证明方法

小开

简单地将colspan设置为表中的列数。

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

最好的方法是将colspan设置为开始时的正确数字。如果你的表有5列，将其设置为colspan="5"，这是唯一的方法，将工作在所有场景。不，这不是一个过时的解决方案，也不是只推荐用于IE6之类的——这实际上是处理这个问题的最佳方式。

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

如果列数是可变的，则需要计算列数，以便填充colspan。如果您的列数是可变的，那么无论生成表的是什么，都应该能够适应于计算表的列数。

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

小开 
colspan="100%"

它的工作也在电子邮件outlook, gmail....


提交答案