使用wkhtmltopdf转换html表格报告：
<!DOCTYPE html>
<html lang="en"></html>
<head>
<style type="text/css">
@font-face {
font-family: Plex;
src: url(/home/shawn/Development/Websites/MDSova/restapi/templates/fonts/IBMPlexSans-Regular.ttf);
}
@font-face {
font-family: Plex-Bold;
src: url(/home/shawn/Development/Websites/MDSova/restapi/templates/fonts/IBMPlexSans-SemiBold.ttf);
}
body {
font-family: Plex, Arial, Helvetica, sans-serif;
background-color: #FFF;
font-size: 18px;
}
h1,
h2,
h3 {
margin: 0;
padding: 0;
}
.report-data-table,
.report-title-table {
width: 100%;
border-collapse: collapse;
}
.report-title-table {
line-height: 36px;
}
.report-title-left,
.title-right {
width: 15%;
}
.report-title-center {
width: 70%;
text-align: center;
}
.report-title-right {
text-align: right;
}
.report-date-header,
.report-date-col {
width: 10%;
background-color: chocolate;
}
.report-for-header,
.report-for-col {
width: 14%;
background-color: palegreen
}
.test {
width: 78%;
background-color: forestgreen;
}
.report-date-header,
.report-for-header,
.report-source-header,
.report-sourcename-header,
.report-account-header,
.report-method-header,
.report-reference-header,
.report-amount-header {
font-family: Plex-Bold;
border-bottom: 1px solid #333;
}
</style>
</head>
<body>
<table class="report-title-table">
<tr>
<td class="report-title-left">01/15/2023</td>
<td class="report-title-center">
<h1>Payment Ledger</h1>
</td>
<td class="report-title-right">11:23AM</td>
</tr>
</table>
<table class="report-data-table">
<tr>
<td class="report-date-header">Payment Date</td>
<td class="report-for-header">Payment For</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
</table>
</body>
我知道这里有很多代码，但未对齐的地方有几行。它也不只在一行上——它是随机的。当 html 被放入浏览器中时显示正常，但它不会转换为打印版本。
我该怎么做才能纠正这个问题？谢谢
添加更多行后，我可以重现该问题，这表明该问题确实相当难以预测。
但是，该问题似乎是由
border-collapse:collapse;css 属性引起的。删除它会使所有行具有相同的高度。当然，这也会导致每个表格单元格周围出现白色边框，这可能是不希望的。
要使边框与单元格融为一体，解决方案是使用整个表格的背景图案（而不是单个单元格的
background-color属性）为列着色。在下面的代码中，我创建了一个内联 svg 图像，该图像由三个具有表格列宽度和颜色的矩形组成：
为了在转换过程中正确计算列宽，我需要将 dpi 设置调整为 130：
HTML 代码：
Payment Ledger
生成的 pdf 文件：