在 CSS 中定义表格的宽度和高度，以便在打印时具有特定的宽度/高度比

Question

我的网页上有一个表格，它使用特定的打印 CSS，它删除了所有网站元素，以便可以将其打印在海报上。

我做的是：

1. 使用谷歌浏览器访问页面，
2. 点击：文件->打印->“使用系统对话框打印...”，
3. 点击 PDF -> “另存为 PostScript”，然后
4. 使用 Adob​​e Distiller 处理（150 dpi 和 18” x 24”）。

由于我希望我的桌子能很好地填满 18"x24" (18/24 = 3/4) 的海报，我如何才能确保它的宽/高纵横比是 3/4，而无需输入特定尺寸会来咬我吗？

Answer 1

目前，我想到的唯一解决方案是你必须用两个额外的divs 包裹桌子。

这是fiddle

正如我们所说，我正在尝试改进解决方案以摆脱 div。

目前我正在使用一个 div 作为 wrapper，宽度设置为 100%，然后在其中有另一个 div (innerWrapper) 绝对定位并传播到 wrapper's方面。为了设置 div 的 height，我使用了一个简单的技巧 - 将伪 :after 元素添加到 wrapper，其中 padding-bottom 设置为 133%。填充百分比值继承自父级的 width（是的！）。如果有人问 - 我们不能省略 innerWrapper div 并将其样式直接设置为 table 因为 top, right, bottom, left 方法不适用于它（width 和 height 都设置为 100% ）。 div 是 block 元素，表有 display: table。
整个代码如下所示：

HTML：

<div id="wrapper">
    <div id="innerWrapper">
        <table></table>
    </div>
</div>

CSS：

#wrapper {
    width:100%;
    position: relative;
}
#wrapper:after {
    content: "";
    display: block;
    padding-bottom: 133%;
}
#innerWrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
table {
    width: 100%;
    height: 100%;
}