how to define height of table in css dompdf

Question

I use dompdf to create a pdf. On this pdf, i create a table. But I want to make this table still constant height like 500px;

This is the code:

 <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>

See in div and table height properties. I already declared it. So, if just one row in tbody, I wanna the table have constant height But this is not work in dompdf.

Please help, Any help it so appreciated.

Answer 1

dompdf has some restrictions when it comes to tables. It is able to handle a defined width and distribute that as necessary in a fairly acceptable manner. But a defined height causes problems as dompdf does not know how to distribute the height across rows.

If you had a single row it would size the row correctly, but that's obviously not a solution for your problem.

There is no known work-around at this time.

Answer 2

You do not need to specify 'px' for table widths and heights.

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

If the table is Dynamic, you might need some JS to add heights to all the rows. 3 Table rows = (550 / 3). If the table is static, just do the maths yourself and add the height to each row. Without this height the table will form according to its contents.

Don't add width or height as an inline style. TABLE, TH's, TR's, and TD's have parameters for height and width. Remember to leave out "px"