为啥边框折叠在 html2pdf 中不起作用？

Posted 2023-02-24

【中文标题】为啥边框折叠在 html2pdf 中不起作用？

【英文标题】：Why doesn't border-collapse work in html2pdf?为什么边框折叠在 html2pdf 中不起作用？

【发布时间】：2015-06-21 03:37:00

【问题描述】：

我想创建一个带有 html 表格的 pdf，例如：

所以，我创建了这个 html：

<table style="width: 100%; border:2px solid; border-collapse: collapse; padding: 0; margin: 0;">
    <tr style="border-bottom: 1px solid;">
        <th style="border-left: 1px solid; width: 60%;">Ref produit</th>
        <th style="border-left: 1px solid; width: 10%;">Taille</th>
        <th style="border-left: 1px solid; width: 10%;">Quantit�</th>
        <th style="border-left: 1px solid; width: 10%;">Prix net HT</th>
        <th style="border-left: 1px solid; width: 10%;">Montant HT</th>
    </tr>
    <tr>
        <td style="border-left: 1px solid;">BAL100</td>
        <td style="border-left: 1px solid; text-align: center;">S</td>
        <td style="border-left: 1px solid; text-align: center;">20</td>
        <td style="border-left: 1px solid; text-align: center;">22.00</td>
        <td style="border-left: 1px solid; text-align: center;">440</td> 
    </tr>
    <tr>
    .
    .
    .
    </tr>
</table>

pdf结果为：

边界消失了！

如果我删除属性border-collapse: collapse; 会出现边框但结果不合适。

我在official forum（法语帖子）上看到属性border-collapse 仅适用于标签table。所以我不明白为什么我的表格没有正确生成。

有什么想法吗？

这是我生成pdf的php代码

$html2pdf = new HTML2PDF('P','A4','fr');
$html2pdf->WriteHTML($htmlContent);
$html2pdf->Output($path, 'F');

【问题讨论】：

你试过设置边框颜色吗？即1px solid black

你是如何从 html 创建 pdf 的？

@AryehArmon 在我的问题底部有 3 行 php，$htmlContent 包含我的 html。我使用库 html2pdf

你用的是什么版本的html2pdf？

@enigma html2pdf => 4.03 和 tcpdf => 4.0.014

【参考方案1】：

我找到了一种解决方法，如果我将 css 属性 border-collapse: collapse; 替换为 cellspacing="0"，结果看起来还可以。

<table cellspacing="0" style="width: 100%; border:2px solid;position: relative;">

【讨论】：

但我不明白为什么border-collapse 不起作用，因为它在css compatibility list 中。

兼容列表的 web.archive 链接：web.archive.org/web/http://www.studentenwerk-goettingen.de/pdf/…

【参考方案2】：

border-collapse: collapse; 应该将两个相同的相邻边框合并在一起。在 html2pdf 中使用它时，您应该同时设置 border-left 和 border-right 属性的样式（作为相同的东西），它们在折叠时会产生单个边框。另外，为了防御性地编写这个CSS，而不是假设border-color属性继承，你应该在定义边框时从技术上指定它，例如border: 1px solid black;