在单元格中拉伸嵌套表格

Question

以下是Chrome上http://jsfiddle.net/mark69_fnd/LftRY/的快照：

请注意，用于地址的内部表格未正确拉伸 - 它们的右侧短一个或两个像素。尽管在css中给表元素赋予了100％的宽度，但没有填充/边距。

如何让这些表占据封闭单元格的整个空间？

修改

所有浏览器都存在某种问题。我的代码在Chrome，IE9和Firefox中都没有显示适当的拉伸。

EDIT2

Firefox - 同样的问题，但在左侧：

IE9 - 同样的问题，但在“Bill To”的右侧和“Ship To”的左侧：

EDIT3

我已经使用了表格，因为我无法使其与<div>一起使用并且所有元素都已正确对齐和拉伸。如果有人发布了解决所有描述的问题的答复，并且行为与基于表格的解决方案相同 - 我将很乐意信用并采用它。

Answer 1

我不是使用表格的忠实粉丝，但在这种情况下，表格是目前最好的解决方案。它是在您要显示的所有表格数据之后。

有人说，我不认为你应该在这里使用嵌套表，这只会让事情变得复杂。只需继续使用colspans，您就可以轻松实现相同的结果。此外，它还将消除您现在遇到的边框问题。看看这个：http://jsfiddle.net/LftRY/21/

请注意，input css也进行了一些更改。我删除了所有边框，填充和边距，因此我可以将它们设置为100％宽度，以强制它们采用与其父级相同的宽度。我还删除了html中的<br>标记，并将输入设置为显示为块元素。我不是使用<br>的忠实粉丝，除非绝对需要（很少这种情况）。

我还添加了一个类.no-lines，您可以在想要无边界显示的单元格或行上使用它。正如你所看到的，我把它们用在了“差距”上。在标题中的两个地址之间，以及我添加的页脚作为示例。如果需要，您甚至可以在整行上使用它。

此外，我冒昧地将thead，tbody和tfoot标签添加到表格html中。这将改善具有屏幕阅读器的人的访问，对SEO更好，并且在语义上更正确imo。

希望这就是你所追求的。如果没有，请随时询问！

Answer 2

  

如何让这些表占据封闭单元格的整个空间？

你已经做到了。然而，在你呻吟的浏览器中，你在脑海中构成的“封闭单元的完整空间”是什么，在技术上是错误的。

它是100％宽度，完全填满。正如上面的@bažmegakapa所述，您应该重新思考如何绘制边框，例如：您可能只是想要不折叠它们，更喜欢内部的外部边界（或者相反但比现在更严格）以更轻松地跨浏览器设置边框。

或者以其他方式深入细节并学习 - 即使是经过反复试验 - 如何根据您的需要折叠边框。

http://jsfiddle.net/LftRY/3/