Cielo Agnes Muyot
May 18, 2015, 3:36:00 AM5/18/15
to dom...@googlegroups.com
Hello,
I would like to ask if it is possible to scale a table in dompdf? Like in excel, it can be scaled to 85% or scaled to fit in page. I've tried the page-break-inside in CSS like what was said in other forums but it didn't work out. I also tried setting the height of the table/page/body to 50% but it doesn't resize.
Thanks in advance.
I would like to ask if it is possible to scale a table in dompdf? Like in excel, it can be scaled to 85% or scaled to fit in page. I've tried the page-break-inside in CSS like what was said in other forums but it didn't work out. I also tried setting the height of the table/page/body to 50% but it doesn't resize.
Thanks in advance.
BrianS
May 18, 2015, 1:41:13 PM5/18/15
to dom...@googlegroups.com, cay....@gmail.com
There's not really an option for that in dompdf. The way dompdf renders tables is similar to how web browsers do, which is to look at the width of the page and the width of the content of each column. In addition to the way tables are rendered dompdf's table handling is limited in some ways.
That being said I do have a quick thought on how you can simulate this. Using CSS you can specify a fixed width to your table and style the table with table-layout: fixed. The table would render at the width specified. If you also apply a scaling value you can shrink the table in place. Something like the following:
The main drawback to this method is that the space taken by the table is unchanged, meaning there could be a potentially large blank space between the bottom of the table and any following content. It's also not possible to scale to 100%. You would have to know your table's width and apply a scaling that matches your page width.
That being said I do have a quick thought on how you can simulate this. Using CSS you can specify a fixed width to your table and style the table with table-layout: fixed. The table would render at the width specified. If you also apply a scaling value you can shrink the table in place. Something like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<table border="1" width="100%">
<caption style="margin-top: 20px;" >Normal Table, Width = 100%</caption>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</tbody>
</table>
<table style="table-layout: fixed; width: 800px;" border="1">
<caption style="margin-top: 20px;" >Normal Table, Width = 800px</caption>
<tbody>
<tr>
<td width="30%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </td>
<td width="70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</tbody>
</table>
<table style="table-layout: fixed; width: 800px; transform: scale(.65);" border="1">
<caption style="margin-top: 20px;" >Normal Table, Width = 800px, table-layout = fixed</caption>
<tbody>
<tr>
<td width="30%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </td>
<td width="70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</tbody>
</table>
<p>You can see extra spacing between the preceding table and this paragraph.</p>
</body>
</html>The main drawback to this method is that the space taken by the table is unchanged, meaning there could be a potentially large blank space between the bottom of the table and any following content. It's also not possible to scale to 100%. You would have to know your table's width and apply a scaling that matches your page width.
Cielo Agnes Muyot
May 18, 2015, 8:41:42 PM5/18/15
to dom...@googlegroups.com
Thank you, sir. The transform attribute works. Though, I'm having trouble with page break. It still splits the table even if it's scaled. I already tried the three page-break attributes but it still gives the same result.
BrianS
May 19, 2015, 3:00:10 PM5/19/15
to dom...@googlegroups.com, cay....@gmail.com
The scaling will happen after the table has been rendered. Unfortunately that includes page breaks. Probably the easiest way to get around it is to break the page before the table. If that's not possible you could try placing the table in a containing div. You could even set a max-height to try to minimize post-table spacing. E.g.:
<div style="page-break-inside: avoid; max-height: 250px; overflow: hidden;">
<table>...</table>
</div>Cielo Agnes Muyot
May 19, 2015, 8:20:44 PM5/19/15
to dom...@googlegroups.com
It didn't make any difference, sir. I tried enclosing it into a div as you've said, but the div also breaks. I also tried setting the margin-top of the table to negative. But seems like the page really breaks at a certain point. Please check out the attached file to see the page break point.
BrianS
May 19, 2015, 9:26:01 PM5/19/15
to dom...@googlegroups.com, cay....@gmail.com
Can I see the HTML for that? You'll need to set a height/max-height to prevent the table from wrapping.
(Also, you're using v0.6.1 correct?)
BrianS
May 20, 2015, 10:06:59 PM5/20/15
to dom...@googlegroups.com, cay....@gmail.com
Whether this will work or not depends entirely on your document, but you could position the container absolutely. If you've got any preceding or following content you can further contain it in yet another container that is relatively positioned. You would have to manually set a height, though, to ensure any following content is positioned properly.
<div style="position:relative;">
<div style="position:absolute;page-break-inside: avoid; max-height: 250px; overflow: hidden;">
<table>...</table>
</div>
</div>Cielo Agnes Muyot
May 20, 2015, 10:34:11 PM5/20/15
to dom...@googlegroups.com, cay....@gmail.com
Worked like magic! Thank you so much sir! :)
Reply all
Reply to author
Forward
0 new messages