使用mPDF导出数据表时CSS边框无法生效的问题求助

我之前也踩过mPDF处理CSS边框的坑，它对一些现代CSS属性支持有限，结合你的测试代码，给你几个针对性的解决方案：

1. 放弃box-shadow，改用传统border属性 #

mPDF对CSS3的box-shadow（尤其是内阴影）支持很不完善，你给h1加的内阴影基本不会生效。换成直接的border属性就靠谱多了：

h1 {
    font-size: 16px;
    border: 1px solid #000; /* 直接用实线边框 */
    padding: 4px; /* 加内边距让边框和文字不挤在一起 */
}

2. 表格边框的正确打开方式 #

表格边框失效大概率是没设置border-collapse，这是mPDF渲染表格边框的关键：

table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse; /* 必须设置，合并单元格边框 */
    border: 1px solid #000; /* 表格外边框 */
}
table th, table td {
    border: 1px solid #000; /* 给每个单元格加边框 */
    padding: 8px; /* 优化单元格内边距 */
}

另外注意你的代码里borde...是语法错误，必须补全为完整的border属性哦。

3. 尽量不用@media(print)包裹样式 #

mPDF对@media(print)的解析有时候会出问题，直接写全局样式反而更稳定。如果需要区分网页和PDF的样式，可以单独为PDF的HTML结构编写专属CSS。

完整可运行的示例代码 #

<?php
require_once('vendor/autoload.php');
ob_start();
?>
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        h1 {
            font-size: 16px;
            border: 1px solid #000;
            padding: 5px;
        }
        table {
            width: 100%;
            font-size: 13px;
            border-collapse: collapse;
            border: 1px solid #000;
        }
        table th, table td {
            border: 1px solid #000;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1>测试标题</h1>
    <table>
        <thead>
            <tr>
                <th>列名1</th>
                <th>列名2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>测试数据1</td>
                <td>测试数据2</td>
            </tr>
            <tr>
                <td>测试数据3</td>
                <td>测试数据4</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
<?php
$html = ob_get_clean();
$mpdf = new \Mpdf\Mpdf();
$mpdf->WriteHTML($html);
$mpdf->Output('test.pdf', 'I');
?>

额外排查点 #

• 确保你用的是最新版mPDF，旧版本对CSS的支持缺陷更多；
• 检查是否有其他CSS规则覆盖了边框样式（比如继承了border: none）；
• 如果需要圆角边框，mPDF对border-radius的支持有限，复杂圆角可能无法渲染。

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