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

Question

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

我做的是:

1. 使用 Google Chrome 访问页面，
2. 单击:文件 -> 打印 -> “使用系统对话框打印...”，
3. 单击 PDF -> “另存为 PostScript”，然后
4. 使用 Adob​​e Distiller 处理(150 dpi & 18” x 24”)。

因为我想让我的 table 很好地填满 18"x24"(18/24 = 3/4) 海报，我如何才能确保它的宽度/高度纵横比是 3/4，而不用输入特定的尺寸会来咬我一口吗？

Answer 1

目前，我想到的唯一解决方案是您必须用另外两个 div 包裹 table 。

Here's the fiddle

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

目前我正在使用一个 div 作为 wrapper将宽度设置为 100%，然后在其中有另一个 div ( innerWrapper )，它绝对定位并分布到 wrapper。的尺寸。为了设置 div 的高度，我使用了一个简单的技巧——添加了一个伪 :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%;
}