Colspan所有列
如何指定td标签应该跨越所有列(当表中列的确切数量是可变的/很难确定何时呈现)？w3schools提到可以使用colspan="0"，但它没有确切说明哪些浏览器支持该值(IE6在我们的列表中支持)。
将colspan设置为大于理论列数的值似乎是可行的，但如果将table-layout设置为fixed，则不会起作用。对colspan使用大量的自动布局有什么缺点吗？有没有更正确的方法呢？
回答 8
Stack Overflow用户
发布于 2009-09-24 10:55:49
如果你想创建一个横跨所有列的“标题”单元格，作为表格的标题，你可能需要使用标题标签(http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)这个元素就是为了这个目的。它的行为类似于div，但不会覆盖表的父对象的整个宽度(就像div在同一位置所做的那样(不要在家里尝试！))，相反，它会覆盖表的宽度。有一些边界的跨浏览器问题，诸如此类(对我来说是可以接受的)。无论如何，您可以让它看起来像一个跨越所有列的单元格。在中，您可以通过添加div-element来创建行。我不确定你是否可以将它插入到tr-element之间，但我猜这是一个技巧(所以不推荐)。另一种选择是摆弄浮动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>Stack Overflow用户
发布于 2014-03-29 03:52:59
如果您正在使用jQuery (或者不介意添加它)，这将比这些hack更好地完成工作。
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));
});如果你发现一个不适用的实现，不要猛烈抨击答案，在评论中解释，如果可以的话，我会更新的。
Stack Overflow用户
发布于 2009-10-28 12:32:51
另一个有效但丑陋的解决方案是：colspan="100"，其中100是一个大于colspan所需的总列数的值。
根据W3C，colspan="0"选项只对COLGROUP标签有效。
https://stackoverflow.com/questions/398734
复制相似问题