HTML表格 - 如何让子表格的列具有与父表格列相同的宽度？

所以，我有一张桌子内的表格（在TD内）。HTML表格 - 如何让子表格的列具有与父表格列相同的宽度？

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

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

这是它的样子：

enter image description here

我应该如何样式子表？

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

或者我需要通过jquery写一个“规范化”函数，这将改变页面加载的列宽度？

来源

2011-12-21 Tool

使用适当的合并单元格，它应该工作，假设你有没有什么CSS来改变，因为你还没有标记这个问题为CSS – defau1t 2011-12-21 18:01:02

我在TD上没有合并单元格= 15。（父母有15列），如果这就是你的意思。但仍然是这样。 – Tool 2011-12-21 18:05:48

好的，你需要确保宽度设置正确。那么你可以利用css文本 - 省略号属性 – defau1t 2011-12-21 18:14:14

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

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

这似乎已修复它。我希望不会有任何副作用。感谢所有的帮助。

来源

2011-12-21 18:23:41 Tool

为什么你需要创建另一个表，如果他们有相同数量的列。您应该添加一行而不是另一个表。这样你的专栏将是相同的。

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

来源

2011-12-21 17:54:20

我有我的理由 - 在这种情况下，这是因为我需要用表单包围行。如果你用表单包围了一行 - 这是无效的HTML，所以我需要在TD内部的整个表。这就是其中一个原因 - 这是数据表插件的一部分，它以这种方式工作 - 他们在点击行后添加一个新表。 – Tool 2011-12-21 17:56:46

在这种情况下，确保父表格列的宽度是其内部宽度的基础。因此，调整内部表格的宽度以适应内容宽度，然后调整其父宽度。 – 2011-12-21 18:02:16

你能编辑你的文章并进一步阐述吗？我不知道如何去做你所描述的。 – Tool 2011-12-21 18:03:46

答案是一对夫妇不同的东西。

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

此外，一定要删除任何边界，填充，利润等，如果它仍然心不是完全正确考虑border-collapse

来源

2011-12-21 18:03:06 PseudoNinja

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

您也可以编写加载页面后发生的JavaScript代码，以调整该顶部表的列大小以匹配底部表。您的里程可能会因此而有所不同。

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

来源

2011-12-21 18:21:38 slolife

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

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

来源

2016-06-21 18:31:06 snyderxc

HTML表格 - 如何让子表格的列具有与父表格列相同的宽度？

回答

相关问题