如何在css dompdf中定义表格的高度

Question

我使用 dompdf 创建一个 pdf。 在这个 pdf 上，我创建了一个表格。但我想让这张桌子仍然保持恒定的高度，比如 500px；

这是代码：

 <div style="width : 100%; height: 550px">
                    <table class="detail" style="width : 100%; padding-top: -10px; height: 550px ">
                        <tbody>
                            <tr>
                                <th rowspan="2" style="width : 5%; border: 1px solid black"><strong>No</strong></th>
                                <th rowspan="2" style="width : 50%; border: 1px solid black"><strong>DESCRIPTION</strong></th>
                                <th colspan="2" style="border: 1px solid black"<strong>UNIT</strong></th>
                                <th rowspan="2" style="border: 1px solid black" colspan="2">Total<br> IDR</th>
                            </tr>

                            <tr>
                                <td style='text-align : center; border: 1px solid black '><strong>QUANTITY</strong></td>
                                <td style='text-align : center; border: 1px solid black' ><strong>PRICE</strong></td>
                            </tr>

                            <tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>1</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>STORAGE</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>30,103,437.60</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>30,103,437.60</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>2</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>REPO</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>1,470,852.00</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>1,470,852.00</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>3</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>CLEANING</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>129,244,310.00</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>129,244,310.00</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>4</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>ONE_BAR</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>20,591,928.00</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>20,591,928.00</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>5</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>PERIODICAL TEST 2.5 YEARS</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>3,404,750.00</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>3,404,750.00</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>6</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>PERIODICAL TEST 5 YEARS</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>7,354,260.00</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>7,354,260.00</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>7</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>REPAIR</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>104,211,907.05</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>104,211,907.05</td></tr>

                            <tr>
                                <td style='height : 50px;text-align : center; border-right: solid 1px black; border-bottom : solid 1px black; border-top:none'></td>
                                <td style='text-align : left; border-right: solid 1px black; border-bottom : solid 1px black; border-top:none; padding: 2px;'><strong>PERIODE MEI 2016 </strong></td>
                                <td style='text-align : left; border-right: solid 1px black; border-bottom : solid 1px black; border-top:none; padding: 2px;'></td>
                                <td style='text-align : left; border-right: solid 1px black; border-bottom : solid 1px black; border-top:none; padding: 2px;'></td>
                                <td colspan="2" style='text-align : right; border-right: solid 1px black; border-bottom : solid 1px black; border-top:none; padding: 2px;'></td>
                            </tr>

                            <tr>
                                <td rowspan="3" colspan="3" style="border : none;"></td>
                                <td style="text-align : right; border: 1px solid black"><strong>SUB TOTAL</strong></td>
                                <td colspan="2" style="text-align : right; border: 1px solid black">296,381,444.65</td>
                            </tr>

                            <tr>

                                <td style="text-align : right; border: 1px solid black"><strong>VAT 10%</strong></td>
                                <td colspan="2" style="text-align : right; border: 1px solid black; ">
                                    29,638,144.47                                    </td>
                            </tr>

                            <tr>

                                <td style="text-align : right; border: 1px solid black"><strong>TOTAL</strong></td>
                                <td colspan="2" style="text-align : right; border: 1px solid black">
                                    326,019,589.12                                    </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

查看 div 和表格高度属性。我已经宣布了。因此，如果 tbody 中只有一行，我希望表格具有恒定的高度但这在 dompdf 中不起作用。

请帮忙，非常感谢任何帮助。

Answer 1

dompdf 在表格方面有一些限制。它能够处理定义的宽度并根据需要以相当可接受的方式分配它。但是定义的高度会导致问题，因为 dompdf 不知道如何跨行分配高度。

如果您只有一行，它将正确调整该行的大小，但这显然不是您的问题的解决方案。

目前没有已知的解决方法。

Answer 2

您不需要为表格的宽度和高度指定“px”。

<table class="detail" style="width : 100%; padding-top: -10px; height: 550">

如果表格是动态的，您可能需要一些 JS 来为所有行添加高度。 3 表行 = (550 / 3)。 如果表格是静态的，只需自己计算并将高度添加到每一行。如果没有这个高度，表格将根据其内容形成。

不要将宽度或高度添加为内联样式。 TABLE、TH、TR 和 TD 具有高度和宽度参数。记得省略“px”