0

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

それを修正する方法についてのアドバイスをいただければ幸いです。

4

0 に答える 0