如何让PDF中A4横向模式的HTML表格显示更大？

你要在A4横向PDF里让表格显示更大，之前用旋转容器的方法导致内容截断，页面实际还是纵向，表格尺寸也不对。问题出在尺寸设置和旋转逻辑上，直接用@page指定横向页面后，不需要手动旋转容器，调整后的代码如下：

<style>
    body, html {
        margin: 0;
        padding: 0;
        width: 297mm;  /* A4横向页面的标准宽度 */
        height: 210mm; /* A4横向页面的标准高度 */
        overflow: visible; /* 避免内容被强制隐藏，按需可改为auto */
    }
    @page {
        size: A4 landscape;
        margin: 0; /* 清除浏览器默认边距，让表格占满页面 */
    }
    .specific-table-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start; /* 从顶部开始排列，避免内容被挤到页面外 */
        background-color: #fff;
    }
    table {
        width: 100%; /* 填充容器宽度，即A4横向的297mm */
        border-collapse: collapse;
        /* 去掉强制高度，让表格根据内容自适应，避免内容截断 */
    }
    th, td {
        border: 1px solid #666;
        padding: 5px;
        text-align: left;
        font-size: 12px;
        vertical-align: middle;
    }
    th {
        font-weight: bold;
    }
    tr:nth-child(odd) {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #ffffff;
    }
</style>

关键调整说明： #

• 修正页面尺寸：A4横向的标准尺寸是宽297mm、高210mm，之前的设置搞反了，导致页面实际仍为纵向
• 移除冗余旋转属性：transform和transform-origin完全没必要，@page已经把页面设为横向，手动旋转反而会让内容超出页面范围被截断
• 取消表格强制高度：原来固定210mm高度会导致内容过多时被截断，改为自适应高度后能完整显示所有内容
• 调整容器对齐方式：把align-items: center改成flex-start，避免表格内容因居中被挤到可视区域外

如果表格内容确实过长，超出A4横向的高度（210mm），可以尝试：

• 适当缩小字体或内边距（比如把font-size改成11px，padding改成3px）
• 给容器添加overflow-x: auto启用横向滚动（需确保PDF生成工具能渲染完整滚动内容）

内容的提问来源于stack exchange，提问作者kinruyuu