如何使子表的列具有与其父表列相同的宽度？

Question

我在表格中有一个表格（在td内）。

此子表与父表具有完全相同的列数。

唯一的问题是，子表的列与父表的列的宽度不同。

这就是它的样子：

我该如何设置子表的样式？

是否有预定义的方法来解决此问题？

或者我是否需要通过jquery编写“规范化”功能，这会改变页面加载时列的宽度？

Answer 1

如果列数相同，为什么还需要创建另一个表。您应该只添加一行而不是另一个表。这样你的专栏就会一样。

问题是内表的内容正在推动单元格宽度。

Answer 2

尝试使用rowspan属性而不是嵌套表。如果你需要，说3组数据，但希望它们都有相同的标题（在左侧）将左侧单元格的行跨度设置为3，并将其他每个单元格保留为默认值1.您＆＃ 39; ll需要忽略为后续行添加该单元格。

请参阅：http://www.w3schools.com/tags/att_td_rowspan.asp

Answer 3

答案有两个不同的地方。

最快的方法是向每个列添加类（并确保它们在父/子之间配对）。我通常使用“col-”前缀。将你的宽度设置为类，你应该更接近。

如果仍未正确查看border-collapse

，请务必删除任何边框，填充，边距等。

Answer 4

如果您被迫这样做，请使用CSS或两个表中的HTML属性明确指定每列的宽度。

您还可以编写在加载页面后发生的javascript代码，以调整该顶级表的列的大小以匹配底部表。你的里程可能因这种方法而有所不同。

您在另一个关于需要每行表单的答案中的评论让我觉得您可以修改您的布局以将表单放在表格周围并将两个表格组合在一起以使表头和数据行在同一个表格中。然后进行一些后端代码更改以不同的方式处理帖子。

Answer 5

function normaliseWidth(id)
{
    iter = 1;
    $("#splitForm" + id + " td").each(function() {
        //alert($(this)); 
        $(this).width($("#" + id + " td:nth-child(" + iter + ")").width());
        ++iter;
    });
}

我只是遍历所有td并将其宽度更改为父级宽度。

这似乎解决了这个问题。我希望不会有任何副作用。感谢您的帮助。