我正在使用 imgkit 和 html/css 来制作包含来自数据框的数据的表格。我在浏览器中呈现的 html/css 看起来应该是这样，但是 imgkit 呈现的图像在第 3 行和绿色背景中有水平间隙。
imgkit 输出
：
它应该是什么样子：
HTML/CSS 代码
<head>
<style>
#box {
width: 750px;
height: 250px;
display: table;
}
table {
font-family: Arial;
color: #000000;
font-size: 8pt;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
min-height: 70%;
border-collapse: collapse;
border-spacing: 0;
}
td, tr {
padding: 0px;
}
.border-right {
border-right: 2px solid #29577e;
}
.border-bottom, .border-bottom td {
border-bottom: 2px solid #29577e;
}
.dash {
border-bottom: 1px dashed #29577e;
}
.bold {
font-weight: bold;
}
.right {
text-align: right;
}
.col-1, .col-2, .col-3, .col-7 {
text-align: left;
}
.col-1 {
}
.indent1 {
text-indent: 20px;
}
.indent2 {
text-indent: 40px;
}
.green {
background-color: #d5eff0;
}
</style>
</head>
<div id="box">
<table cellpadding="0">
<tr class="index top bold">
<th class="col-1"><th>
<th class="col-2"><th>
<th class="col-3"><th>
<th class="col-4 right">L12M<th>
<th class="col-5 right">L3M<th>
<th class="col-6 border-right right">L1M<th>
<th class="col-7"><th>
<th class="col-8 right">L12M<th>
<th class="col-9 right">L3M<th>
<th class="col-10 border-right right">L1M<th>
</tr>
<tr class="index bottom bold">
<th class="col-1">Revenue (K�)<th>
<th class="col-2"><th>
<th class="col-3"><th>
<th class="col-4 right"><th>
<th class="col-5 right"><th>
<th class="col-6 border-right right"><th>
<th class="col-7">BV waterfall (K�)<th>
<th class="col-8 right"><th>
<th class="col-9 right"><th>
<th class=" col-10 border-right right"><th>
</tr>
<tr class="row-1">
<td class="col-1"><td>
<td class="col-2">Total Collections<td>
<td class="col-2"><td>
<td class="col-4 right">147,499<td>
<td class="col-5 right">40,734<td>
<td class="col-6 border-right right">12,116<td>
<td class="col-7 bold indent1 dash">BV (BoP)<td>
<td class="col-8 bold dash right">200,501<td>
<td class="col-9 bold dash right">189,658<td>
<td class="col-10 border-right bold dash right">148,963<td>
</tr>
<tr class="row-2">
<td class="col-1"><td>
<td class="col-2 dash">Amortization<td>
<td class="col-3 dash"><td>
<td class="col-4 dash right">6,499<td>
<td class="col-5 dash right">-1,734<td>
<td class="col-6 border-right dash right">-2,116<td>
<td class="col-7 indent1">New Purchase<td>
<td class="col-8 right">22,342<td>
<td class="col-9 right">3,264<td>
<td class="col-10 border-right right">877<td>
</tr>
<tr class="row-3">
<td class="col-1 border-bottom"><td>
<td class="col-2 border-bottom bold">Revenue<td>
<td class="col-3 border-bottom"><td>
<td class="col-4 border-bottom right">154,499<td>
<td class="col-5 border-bottom right">39,734<td>
<td class="col-6 border-bottom border-right right">9,116<td>
<td class="col-7 green indent2 ">Regular<td>
<td class="col-8 green right">13,704<td>
<td class="col-9 green right">1,701<td>
<td class="col-10 border-right green right">602<td>
</tr>
<tr class="row-4">
<td class="col-1 bold">Costs (K�)<td>
<td class="col-2"><td>
<td class="col-3"><td>
<td class="col-4 right"><td>
<td class="col-5 right"><td>
<td class="col-6 border-right right"><td>
<td class="col-7 green indent2">PRE4<sup>3</sup><td>
<td class="col-8 green right">8,638<td>
<td class="col-9 green right">1,563<td>
<td class="col-10 border-right green right">274<td>
</tr>
<tr class="row-5">
<td class="col-1"><td>
<td class="col-2 bold">Comm<td>
<td class="col-3">FC (c-a)<td>
<td class="col-4 right">32,371<td>
<td class="col-5 right">9,254<td>
<td class="col-6 border-right right">2,875<td>
<td class="col-7 indent1">Purc. Price Changes<td>
<td class="col-8 right">-8,274<td>
<td class="col-9 right">-2,393<td>
<td class="col-10 border-right right">-784<td>
</tr>
<tr class="row-6">
<td class="col-1"><td>
<td class="col-2 dash"><td>
<td class="col-3 dash">Actuals<td>
<td class="col-4 dash right">37,371<td>
<td class="col-5 dash right">11,254<td>
<td class="col-6 border-right dash right">3,875<td>
<td class="col-7 indent1">Amortization<td>
<td class="col-8 right">6,950<td>
<td class="col-9 right">-1,427<td>
<td class="col-10 border-right right">-2,495
<td>
</tr>
<tr class="row-7">
<td class="col-1"><td>
<td class="col-2 bold">Unremitted<td>
<td class="col-3">FC (c-a)<td>
<td class="col-4 right">7,980<td>
<td class="col-5 right">2,300<td>
<td class="col-6 border-right right">541<td>
<td class="col-7 indent2 green">Normal Amortization<td>
<td class="col-8 green right">-32,017<td>
<td class="col-9 green right">-9,167<td>
<td class="col-10 border-right green right">-2,495<td>
</tr>
<tr class="row-8">
<td class="col-1"><td>
<td class="col-2 dash"><td>
<td class="col-3 dash">Actuals<td>
<td class="col-4 dash right">16,700<td>
<td class="col-5 dash right">3,741<td>
<td class="col-6 border-right dash right">756<td>
<td class="col-7 indent2 green">Revaluation<td>
<td class="col-8 green right">38,967<td>
<td class="col-9 green right">7,740<td>
<td class="col-10 border-right green right">0<td>
</tr>
<tr class="row-9">
<td class="col-1"><td>
<td class="col-2 bold">Total<sup>2</sup><td>
<td class="col-3">FC (c-a)<td>
<td class="col-4 right">98,2%<td>
<td class="col-5 right">30,1%<td>
<td class="col-6 border-right right">54,4%<td>
<td class="col-7 dash indent1">Currency Diff. Effect<td>
<td class="col-8 dash right">2,787<td>
<td class="col-9 dash right">-541<td>
<td class="col-10 dash border-right right">4,653<td>
</tr>
<tr class="row-10 border-bottom">
<td class="col-1"><td>
<td class="col-2"><td>
<td class="col-3">Actuals<td>
<td class="col-4 right">16.7%<td>
<td class="col-5 right">41.8%<td>
<td class="col-6 border-right right">75.6%<td>
<td class="col-7 bold indent1">BV (EoP)<td>
<td class="col-8 bold right">194,477<td>
<td class="col-9 bold right">194,477<td>
<td class="col-10 bold border-right right">194,477<td>
</tr>
</table>
</div>
https://codepen.io/maryj25/pen/KKqVKmJ
任何如何解决这个问题的建议都值得赞赏。