2016-12-04 14 views
0

部分的に空白になっているテーブルを含むPDFを作成しようとしています。これを達成するために、私はLaravel wrapperDomPDFを使用しています。空のセルを含むDompdfテーブル

DomPDFは何とか空のセルの高さを誤って計算し、テーブルのグリッドと内容を置き換えているようです。ここで

は最小限壊れ例です。

<html> 
 
<head> 
 
    <style> 
 
     html, body { 
 
\t \t \t font-family: DejaVu Sans; 
 
\t \t } 
 
\t \t 
 
\t \t table { 
 
\t \t \t border-collapse: collapse; 
 
\t \t \t border: none; 
 
      margin: 0; 
 
\t \t \t width: 100%; 
 
\t \t } 
 
\t \t 
 
\t \t table.main td { 
 
      padding: 0; 
 
\t \t \t border: 2px solid black; 
 
\t \t } 
 
\t \t 
 
\t \t .main table td { 
 
\t \t \t border: 1px black solid; 
 
\t \t \t text-align: center; 
 
\t \t \t font-size: 10px; 
 
\t \t \t height: 14px; 
 
\t \t } 
 
\t </style> 
 
</head> 
 

 
<body> 
 
\t <table class="main"> 
 
\t \t <tr> 
 
\t \t \t <td> 
 
\t \t \t \t <table> 
 
\t \t \t \t \t <tr><td>1</td></tr> 
 
\t \t \t \t \t <tr><td>2</td></tr> 
 
\t \t \t \t \t <tr><td>3</td></tr> 
 
\t \t \t \t \t <tr><td>4</td></tr> 
 
\t \t \t \t \t <tr><td>5</td></tr> 
 
\t \t \t \t \t <tr><td>6</td></tr> 
 
\t \t \t \t \t <tr><td>7</td></tr> 
 
\t \t \t \t \t <tr><td>8</td></tr> 
 
\t \t \t \t \t <tr><td>9</td></tr> 
 
\t \t \t \t \t <tr><td>10</td></tr> 
 
\t \t \t \t </table> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <table> 
 
\t \t \t \t \t <tr><td>1</td></tr> 
 
\t \t \t \t \t <tr><td>2</td></tr> 
 
\t \t \t \t \t <tr><td>3</td></tr> 
 
\t \t \t \t \t <tr><td></td></tr> 
 
\t \t \t \t \t <tr><td></td></tr> 
 
\t \t \t \t \t <tr><td></td></tr> 
 
\t \t \t \t \t <tr><td></td></tr> 
 
\t \t \t \t \t <tr><td></td></tr> 
 
\t \t \t \t \t <tr><td></td></tr> 
 
\t \t \t \t \t <tr><td></td></tr> 
 
\t \t \t \t </table> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table> 
 
</body> 
 
</html>

これは、そのテーブルが生成されたPDFにどのように見えるかです:私が追加しようとした

enter image description here

テーブルセルの場合はmin-heightmax-heightですが、resそれでも、それはすべてのことをランダムにミスアライメントします。

答えて

0

line-heightは、フォントサイズと正確に同じに設定する必要があります。これは動作します:

.main table td { 
     border: 1px black solid; 
     text-align: center; 
     font-size: 10px; 
     line-height: 10px; 
     height: 14px; 
    } 
+0

テーブルの使用時に、最小/最大高さの宣言があまりうまく動作しないことは事実です。行の高さを設定するだけでなく、非印刷文字(たとえば、 ' ')を指定して、セルを拡大するためのサイズの内容でスペースを埋めることもできます。 – BrianS

関連する問題