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

看起来,将colspan设置为大于您可能拥有的理论列数量的值是可行的,但如果您将表布局设置为fixed,则它将不起作用。对colspan使用一个大数字的自动布局有什么缺点吗?有更正确的方法吗?


当前回答

只需将colspan设置为表中的列数。

所有其他的“捷径”都有陷阱。

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

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

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

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

其他回答

就用这个吧:

colspan="100%"

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


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

这里有人觉得为了这个看似微不足道的问题而深入到JS中似乎有点过分了吗?

纯CSS

繁荣!我有一个纯CSS解决方案为您提供!下面是一个例子,你只需要向你想要张成所有列的行添加一个类。然后CSS将使第一个<td>元素跨越全宽度,并隐藏其余的<td>元素。(你必须使用可见性:hidden;and NOT display:无;对于这个)。

注意:这个方法至少需要两个单元格才能很好地呈现,如果你保持<td>元素的正确数量,CSS将呈现得最好——不要删除任何元素来为span元素腾出空间。这将有助于确保单元格/行仍然正常运行。

例子

/* standard styling css */ table { border-collapse: collapse; } table, tr, td { border: 1px solid black; } td { padding: 3px; } /* make full width class span the whole table */ .full-span { position:relative; } .full-span > * { visibility: hidden; border:0; } .full-span > *:nth-child(1) { display: block; visibility: unset; position:absolute; } <table> <tbody> <tr> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> </tr> <tr class="full-span"> <td>B1 long text</td> <td>B2</td> <td>B3</td> <td>B4</td> </tr> <tr> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> </tr> <tr> <td>D1</td> <td>D2</td> <td>D3</td> <td>D4</td> </tr> </tbody> </table>

小贴士!

如果你用PHP/JS动态生成你的表,这可能会清理你的一些代码。假设您正在遍历一个2D数组以创建一个表:对于需要跨出所有列的每一行,您需要添加一些逻辑来计算列的数量,添加colspan属性,添加构成表的全宽度所需的任何剩余<td>元素,等等。

使用我的方法,您可以遍历所有列并输出它们,只需将类包含在父行中。

只需将colspan设置为表中的列数。

所有其他的“捷径”都有陷阱。

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

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

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

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

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

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

只是想补充我的经验并回答这个问题。 注意:它只在你有一个预定义的表和一个带有th的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;
    }
}