0

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

在此处输入图像描述

请注意,用于地址的内表未正确拉伸 - 它们的右侧短一到两个像素。尽管在 css 中为表格元素提供了 100% 的宽度并且没有填充/边距。

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

编辑

所有浏览器都表现出某种问题。我的代码在 Chrome、IE9、Firefox 中都没有显示正确的拉伸。

编辑2

Firefox - 同样的问题,但在左侧:

在此处输入图像描述

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

在此处输入图像描述

编辑3

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

4

2 回答 2

2

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

话虽如此,我认为您不应该在这里使用嵌套表,这只会使事情复杂化。只要在哪里继续使用 colspan,您就可以轻松获得相同的结果。它还将消除您现在遇到的边界问题。看看这个:http: //jsfiddle.net/LftRY/21/

input请注意,对css也进行了一些更改。我删除了所有边框、填充和边距,因此我可以将它们设置为 100% 宽度,以强制它们采用与父级相同的宽度。我还删除了<br>html 中的标签,并将输入设置为显示为块元素。除非绝对需要,否则我不太喜欢使用<br>(这种情况很少见)。

我还添加了一个类,.no-lines您可以在要显示无边框的单元格或行上使用它。如您所见,我在页眉中两个地址之间的“间隙”以及作为示例添加的页脚上使用了它们。如果需要,您甚至可以在整行上使用它。

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

希望这是你之后的地方。如果没有,请随时询问!

于 2012-08-23T13:50:14.193 回答
0

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

你已经做了。但是,您在脑海中构成的“封闭单元的完整空间”在技术上在您抱怨的浏览器中是错误的。

它是 100% 宽度,完全填满。正如@bažmegakapa 上面评论的那样,您应该重新考虑如何绘制边界,例如,您可能只想不折叠它们,更喜欢内部高于外部边界(或相反但比现在更严格)以更轻松地跨浏览器设置边界。

或者,深入研究细节并学习——即使通过反复试验——如何根据您的需要折叠边界。

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

在此处输入图像描述

于 2012-08-23T12:50:51.657 回答