Html 拉伸单元格中的嵌套表

以下是Chrome上的快照：

请注意，用于地址的内部表没有正确拉伸-它们的右侧短了一到两个像素。尽管css中的table元素有100%的宽度，并且没有填充/边距，但仍然存在这种情况

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

编辑

所有浏览器都显示出某种问题。我的代码在Chrome、IE9和Firefox中都没有显示出适当的扩展

EDIT2

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

IE9-相同的问题，但在“账单收件人”的右侧和“发货收件人”的左侧：

EDIT3

我求助于表格，因为我无法使它与

一起工作，无法使所有元素正确对齐和拉伸。如果有人发布的回复解决了所有描述的问题，并且表现与基于表的解决方案相同，我会很高兴地推荐并采用它

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

你已经做到了。然而，在你抱怨的浏览器中，你用你的头脑构成的“封闭单元格的完整空间”在技术上是错误的

它是100%宽度，完全填满了。正如@bažmegakapa在上文中所评论的，您应该重新思考如何绘制边界，例如，您可能只是不想折叠它们，更喜欢内部边界高于外部边界（或者相反，但比现在更严格），而不是更容易跨浏览器设置边界样式

或者，深入细节，学习——即使是尝试和错误——如何根据您的需求来缩小边界

---

我不太喜欢使用表格，尽管在这种情况下，表格是目前为止最好的解决方案。毕竟，您要显示的是表格数据

Being说，我不认为您应该在这里使用嵌套表，它只是使事情变得复杂。只要在您所在的位置继续使用colspans，您就可以轻松获得相同的结果。此外，它还将消除您目前遇到的边界问题。看看这个：

请注意，还对

输入

css进行了一些更改。我删除了所有的边框、填充物和边距，因此我可以将它们设置为100%宽度，以强制它们采用与其父对象相同的宽度。我还删除了html中的

标记，并将输入设置为显示为块元素。我不太喜欢使用

，除非绝对需要（这种情况很少发生）

我还添加了一个类，

。无行

，可以在要无边框显示的单元格或行上使用该类。正如你所看到的，我在页眉中两个地址之间的“间隙”上使用了它们，并在页脚上添加了它们作为示例。如果需要，您甚至可以在整行上使用它

此外，我还冒昧地在html表中添加了

thead

、

tbody

和

tfoot

标记。这将提高屏幕阅读器用户的访问能力，更好地进行搜索引擎优化，在我看来，这在语义上更为正确

---

希望这是你以后去的地方。如果没有，请随时提问

嵌套表格！啊，我的眼睛！！这是一个很好的例子@真相-如果您提供了一个具有等效JSFIDLE的回复，而表没有解决我的问题，并且在调整大小、对齐等方面具有完全相同的行为我相信你的回答就是答案。它只是

td

元素的边界空间。重新思考一下你的边界将帮助你解决这个问题。将边框放在

td

s上，而不是内部

表上。@mark：我不完全确定您在这里要做什么，应用程序的目的是什么，以及它的要求是什么？（也就是说，它必须看起来像那样吗？）。在这个网站上发帖是学习的一部分。很抱歉，您的JSFIDLE是否展示了如何解决问题？您可能应该了解崩溃的含义：-您可以先使用，但如果遇到问题，请尝试阅读您接下来实际做了什么-不要一开始就认为您做的一切都是对的。非常好，非常感谢。这正是我想要的。但有一个问题。我的错误是什么？因为在使用嵌套表的地方，嵌套表所在单元格的边框与嵌套表的边框相对，这使它看起来宽了两倍。边框折叠不能防止嵌套表出现这种情况。