Colspan所有列

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

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

当前回答

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

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

2014-03-28 19:52:59

其他回答

这里有人觉得为了这个看似微不足道的问题而深入到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>元素，等等。

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

2023-02-02 10:36:16