2016-12-04 16 views
0

Я пытаюсь создать PDF-файл, содержащий частично заполненную часть, частично пустую. Для этого я использую DomPDF через Laravel wrapper.Таблицы 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-height и max-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