如何指定td标签应覆盖所有列(当表中的确切列数将是可变的/难以确定何时呈现HTML时)？ w3schools提到您可以使用colspan="0"，但并未确切说明哪些浏览器支持该值(IE 6在我们的支持列表中)。
似乎将colspan设置为大于您可能具有的理论列数的值将起作用，但是如果将table-layout设置为fixed，则它将不起作用。 将大量自动布局用于colspan有任何不利之处吗？ 有更正确的方法吗？
-
公认的答案是关于如何不执行此操作，并且似乎存在严重的性能/一致性缺点。 所以我猜答案是：硬编码列数。 我看不到任何可行的选择。
只需使用此：
它可以在Firefox 3.6，IE 7和Opera 11上运行！ (我猜想其他人，我无法尝试)
警告：如下面的注释所述，它实际上与colspan="100"相同。因此，对于css table-layout: fixed或多于100列的表，此解决方案将失效。
-
在IE6-IE8，Chrome [在PC和Mac上]，Firefox 4.0 [PC和Mac]，Safari 5 [PC和Mac]上进行了[其他测试]
-
怎么还这么晦涩？这应该在每个街角大喊！！！我已经在不同时间与这个该死的colspan问题作斗争了很长时间
-
在chrome和firefox上，colspan =" 3％"的处理方式与colspan =" 3"相同。
-
因此，@ zpmorgan是否假定100％与100相同，并且由于上述答案而只能正常工作？
-
@zpmorgan和@Sprog，你是对的！ colspan="100%"恰好表示colspan="100"。
-
大声笑，我很高兴终于看到一个一致的跨浏览器解决方案来解决这个问题，只是通过评论发现这确实是一种欺骗性的不按预期的方式:(我认为它不应该获得比接受的答案= /
-
@Francisco但是100％在语义上更正确，所以它起作用的机制可能并不那么重要？当然，除非您碰巧有一个包含100多个列的表(哎呀)。
-
在chrome中，当设置colspan = 100％时，我松开表格的右边框
-
正如Omu所说，这可能会导致表格边框出现问题，尤其是在涉及单元格间距时。因此，如果您对表有挑剔(哦，我的表...)，那么此解决方案将不起作用。
-
香港专业教育学院使用这种方法，也从来不知道它意味着100列，并且％被有效地忽略了。我认为，如果浏览器确实实现了这一点，那就太棒了，因此我将坚持使用100％。另外，我想如果您有一个包含100列以上的表，那么您手上还有另一个问题:)
-
@JonathanDay：它在语义上完全不正确，在语义上绝对具有误导性。这意味着与外观完全不同。它对正在发生的事情非常困惑，并且在某些情况下(仅table-layout: automatic)有效，这并不能使它变得更好。
-
@jamiebarrow我认为你是对的。如果通过HTML5验证程序运行此构造，它将报告％的存在作为错误。规范似乎很清楚，它不应该存在：w3.org/html/wg/drafts/html/master/
-
当在表+ tds上使用边框时，这不起作用，设置100％会在最后一列的右侧显示一个空格，消除边框。
我有IE 7.0，Firefox 3.0和Chrome 1.0
TD中的colspan =" 0"属性未跨越上述任何浏览器中的所有TD。
可能不建议您将其作为正确的标记做法，但是如果您提供的colspan值比可能的总和更高。列在其他行中，则TD会覆盖所有列。
当表格布局CSS属性设置为fixed时，这不起作用。
再一次，这不是完美的解决方案，但是当table-layout CSS属性是自动的时，它似乎可以在上述3种浏览器版本中使用。希望这可以帮助。
-
如果您在html的开始处指定了严格的doctype，则Firefox 3会按照html 4.01规范的要求呈现colspan。
-
我是colspan="42"的粉丝，可以覆盖整个范围。显然，这对于> 42列是一个问题，但是它是我认可的少数几个魔术数字之一。
-
我强烈建议您输入colspan = <精确正确的数字>。我刚刚在Firefox中遇到了一个性能漏洞，这使我整天都无法解决。任意大的colspan都会在有border-collapse：collapse的大桌子上使FF阻塞。我的表有800行和8列，需要5秒钟的时间来渲染。使用正确的colspan，其后退时间可以缩短至1秒钟。 bugzilla.mozilla.org/show_bug.cgi?id=675417
-
Chrome上奇怪的间距行为：( jsfiddle.net/7XGF6
-
我建议不要使用此方法。刚从OSX上的Chrome获得了非常奇怪的结果(列相互重叠)。
-
如果您尝试给包含"特大" TD的TR元素添加边框，则在Chrome中会发现另一个问题，右侧边框将不可见。
-
看到：jsfiddle.net/xpb4yqeb
-
该方法不适用于Chrome v54。缩小列，使它们在左侧显得非常狭窄。
-
使用大量数字可能会使CSS混乱，例如border-right属性。我假设边框试图在最远的列上结束，即使它没有被使用并且只是一个colspan。
-
您提到的那些浏览器几乎落后60个版本。 Firefox的版本为62，Chrome的版本为69。某些客户端可能使用的是旧版浏览器，但不要认为大多数网站都需要迎合那些以某种方式禁用浏览器更新并将其保留十年的计算机。这个答案也有十年历史了，但可悲的是它仍然是有意义的。
如果要创建一个跨越所有列的"标题"单元格作为表格标题，则可能要使用标题标记(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与浮动div混在一起，但这真是太糟糕了！
做
1
2
3
4
5
| <table>
<caption style="gimme some style!"><!-- Title of table --></caption>
<thead><!-- ... --></thead>
<tbody><!-- ... --></tbody>
</table> |
别
1
2
3
4
5
| <!-- Title of table -->
<table>
<thead><!-- ... --></thead>
<tbody><!-- ... --></tbody>
</table> |
-
正是我想要将分页控件放在数据表底部的内容。它运作完美。非常感谢你。
-
如果要跨表中间的所有列，例如在相关行组之间按分隔符分组，则此方法不起作用。 (铬)
作为部分回答，以下是有关colspan="0"的几点要点，在问题中已提及。
tl; dr版本：
colspan="0"在任何浏览器中均不起作用。 W3Schools是错误的(照常)。 HTML 4表示colspan="0"应该导致一列覆盖整个表，但是没有人实现这一点，因此在HTML 4之后它已从规范中删除。
一些更多的细节和证据：
-
所有主要的浏览器都将其等同于colspan="1"。
这是演示此内容的演示；在您喜欢的任何浏览器上尝试一下。
1
2
3
| td {
border: 1px solid black;
} |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <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"应该被视为跨越所有列：
The value zero ("0") means that the cell spans all columns from the current column to the last column of the column group (COLGROUP) in which the cell is defined.
但是，大多数浏览器从未实现此功能。
-
HTML 5.0(在2012年提出了候选建议)，WhatWG HTML生活标准(今天是主要标准)和最新的W3 HTML 5规范均不包含上面HTML 4引用的措辞，并一致同意不允许为0，在所有三个规格中均使用此措辞：
The td and th elements may have a colspan content attribute specified, whose value must be a valid non-negative integer greater than zero ...
资料来源：
-
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页面的以下声明至少在当今是完全错误的：
Only Firefox supports colspan="0", which has a special meaning ... [It] tells the browser to span the cell to the last column of the column group (colgroup)
和
Differences Between HTML 4.01 and HTML5
NONE.
如果您还不知道W3Schools通常因其频繁的错误而被Web开发人员所鄙视，那么请考虑这是为什么的一课。
-
哈哈，我喜欢没有人去实现它们时，如何将有用的API功能完全删除。 惊人的过程。
对于IE 6，您将希望colspan等于表中的列数。如果您有5列，则需要：colspan="5"。
原因是IE处理colspan的方式不同，它使用HTML 3.2规范：
IE implements the HTML 3.2 definition, it sets colspan=0 as colspan=1.
该错误有据可查。
-
列的数量可能是可变的，我将更新我的问题以包括该评论。
-
尽管最上段的建议很明智，但我认为这里的许多细节都没有错。 HTML 3.2规范说colspan必须是正整数，这使得colspan=0非法；它没有明确规定colspan=0应该作为colspan=1处理(尽管我确实可以确定IE 6的作用)。另外，您链接到的论坛页面上的引用都不再(不再是？)，并且大多数Google搜索结果(现在是？)都是与IE 6 colspan相关的完全不同的错误。
如果您使用的是jQuery(或不介意添加它)，则比其他任何一种hack都能更好地完成工作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| 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，然后可以执行以下操作：
1
2
3
| $('td.maxcols, th.maxcols').each(function(i,o) {
$t = $($(o).parents('table')[0]); $(o).attr('colspan', getMaxColCount($t));
}); |
如果您发现无法实现的实现，请不要大惊小怪，在评论中进行解释，如果可以解决，我将进行更新。
-
如果您有香草JS版本，那就太好了
-
您是否有缺少$(选择器)支持或只是不想使用它的常见用例？
-
都不行我只是好奇jQuery是否在这里增加了任何好处。这是一个非常艰巨的前提条件，并且看起来它在这里仅被最少使用。
-
很公平。在jQuery和Angular之间，很少有我没有这些工具，所以我默认使用它们。现在，我将它留给其他人来提出香草版本。
-
很公平。 :-)
-
由于jQuery有点过时，因此Ive添加了es6版本/答案(没有想用完全不同的代码更新此答案)。
另一个可行但难看的解决方案：colspan="100"，其中100是大于colspan所需总列数的值。
根据W3C，colspan="0"选项仅对COLGROUP标签有效。
-
这在IE8中不起作用
-
colspan =" 100"(例如，超出限制)在某些情况下会导致非常奇怪的表格呈现(我会尝试查找一些测试用例并发布网址)
-
@DanFinch，哪一个在IE8中不起作用？ 0还是100？
-
-1，因为据我所知，最后一段中的主张是错误的。 HTML 4允许
| 具有colspan="0"(请参阅w3.org/TR/REC-html40/struct/tables.html#adef-colspan)，而HTML 5.0不允许在colgroup上使用span="0"(请参见w3.org/TR/html50/tabular-data.html#attr-colgroup-span，其中指出" span内容属性的值必须是大于零的有效非负整数"。
下面是一个简洁的es6解决方案(类似于Rainbabba的答案，但没有jQuery)。
1
2
3
4
5
| 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);
}); |
1
2
3
4
5
6
7
| html {
font-family: Verdana;
}
tr > * {
padding: 1rem;
box-shadow: 0 0 8px gray inset;
} |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <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和带有th的tr，但正在动态加载行(例如，通过AJAX)时，该方法才有效。
在这种情况下，您可以计算第一个标题行中th的数量，并使用它来覆盖整个列。
当您希望在没有找到结果的情况下中继消息时，可能需要这样做。
在jQuery中类似这样，其中table是您的输入表：
1
2
3
4
5
6
7
8
9
| 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;
}
} |
-
就像在此之前发布的JavaScript解决方案一样，这也不能一概而论。 th的数量不一定是列的数量，因为其中一些可能设置了colspan，因此这将无法为每个人编写。
根据规范，colspan="0"的结果应为表格宽度td。
但是，仅当您的桌子有宽度时才如此！表格可以包含不同宽度的行。因此，如果您定义了colgroup，唯一的情况是渲染器知道表格的宽度！否则，colspan =" 0"的结果是不确定的...
http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan
我无法在较旧的浏览器上对其进行测试，但这是从4.0版开始的规范的一部分...
-
"这是自4.0以来规范的一部分"-不，不是完全正确。 它是规范的一部分，但是在HTML 5中已将其删除，并且将colspan设置为0是非法的。 w3.org/TR/html50/(HTML 5.0规范)和html.spec.whatwg.org/multipage/(最新的WhatWG HTML Living Standard)都声明colspan必须大于零。 并且如此处其他答案所述，浏览器从未真正实现您引用的旧HTML 4行为。
也许我是一个直率的思想家，但我有些困惑，您不知道表格的列号吗？
顺便说一下，无论是否定义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
编辑：请复制并粘贴链接，格式将不接受链接中的双重协议部分(或者我不太聪明，无法正确设置其格式)。
-
我同意第一部分：您肯定可以算出该行中将有多少个单元格？您还会如何生成它？
-
不一定，我有一个带有AJAX动态生成表的应用程序，列数可以在回调之间变化。另外，在开发时，您可能会"知道"列数，但是这可能会发生变化，并且您只知道会错过其中之一。
-
另外，如果以后添加列，您可能会忘记更改colspan，最好始终设置为最大。
尝试使用" colSpan"代替" colspan"。 IE喜欢camelBack版本...
-
仅当使用IE并通过JavaScript和.setAttribute(colSpan，int)进行设置时；请注意，此问题已在IE8中修复(仅在stds模式下)
-
+1-我不知道这一点，对您有很大帮助！我不认为colSpan甚至可以在IE6中工作。
|