I create a web page with table rows. It is looking good when i press print button. But sometimes page breaks are cutting page middle of the block. I tried to use tbody as this
<table>
...
<tbody>
<tr><td>sample datea 1</td></tr>
<tr><td>sample datea 2</td></tr>
<tr><td>sample datea 3</td></tr>
</tbody>
<tbody>...</tbody>
...
</table>
When i want to print page it writes as
//first page
sample datea 1
sample datea 2
// second page
sample datea 3
I want to cut after sample datea 3 . I tried to add blokla's div tag CSS as
.blokla{display:block;page-break-inside:avoid; page-break-after:auto}
How can i break page between div tags or another ? My main problem is below.
The CSS you have is valid and works on my end.
However the problem you have is that you are creating two <tbody> tags in a single table. This practice is not "valid" HTML (it is valid). Use only one <tbody> and use this CSS;
tr{page-break-inside:avoid; page-break-after:auto}
Changing the CSS in this way ensures for maximum flexibility in your HTML, presentation for each row will now remain together.
I solved this question with this code
tbody{page-break-inside:avoid; page-break-after:auto; position:relative;
display:block;}
It is working fine.
Related
I have a very complex dynamic table that I need to output to pdf in laravel 5.6. The project I inherited had Dompdf installed and is already rendering all other content. Therefore, I use it as well for compatibility.
My issue is I have a table to render consisting of 13 columns and undefined number of rows, where intermittently a column may span 13 columns for a heading or a row may span several rows at any given time or a colspan within the rowspan that spans 11 columns from the 3rd row. No html is hardcoded except the <table>, <thead>, <th> and <tbody> tags. The html within the tbody tag is dynamically generated depending on the array data.
Everything looks great in the browser and when I view() the pdf blade as well as ctrl + p it creates a nice pdf, although for some reason rowspan cells spanning to the next page does not carry over markup and content. As soon as I try to stream() the pdf the table becomes warped and looks like a toppled building built by Picasso.
Here is links to pdf's, the one I ctrl + p lost its colour due to me removing names.
File to view pdf printed with ctrl + p
Pdf streamed with Dompdf
Image of viewing pdf in browser
Image of pdf when streaming via Dompdf:
Html sample rendered in browser:
<tr style="background-color: #5b8969;">
<td rowspan="2" style="background-color: #F8C293; color: black;">Spray 4</td>
<td>Pollinate</td>
<td>7-10 days later</td>
<td>BENOMYL WP 25KG </td>
<td>benomyl 500g/kg</td>
<td> </td>
<td>1000</td>
<td>2.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Full bloom</td>
<td>Black Spot</td>
<td>WETCIT DUO 20L </td>
<td>borax 10g/orange oil 50g/l</td>
<td> </td>
<td>1000</td>
<td>25.00</td>
<td>100.0000</td>
<td>120.0000L</td>
<td>2500.0000</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="13" style="background-color: #9fb5d3;" class="h3 font-weight-bold">ANOTHER ONE</td>
</tr>
<tr>
<td rowspan="7" style="background-color: #F8C293; color: black;">Spray 7</td>
<td>20 cm</td>
<td>African Armyworm</td>
<td>CERATO 250 EC 5L </td>
<td>pyraclostrobin 250g/l</td>
<td> </td>
<td>1000</td>
<td>2.00</td>
<td>10.0000</td>
<td></td>
<td>20.0000</td>
<td></td>
<td></td>
</tr>
Can someone please help and give me a clue on how to output such a complex table with Dompdf? As I would really want to keep on using only one PDF rendering library in this project.
Otherwise I am open to suggestions to use another pdf library that can handle rowspan that span pages and this complex layout?
Update
Based on a comment by Don't panic (he suggested validating html and fill empty td tags with ), that he subsequently deleted.
I re-wrote the HTML as a template into my pdf.blade.php view. Now, I only output the values in a loop in my view. Firstly, it becomes easier to maintain and to leave off the validation he suggested. I also filled every empty <td> tag with a hardcoded ' '. This is to more easily see why certain rows end where they should and others not. The result is sadly still the same, a warped table. But it does seem to be a rowspan issue not colspan. The 'rowspan' rows stack after another. So maybe missing a td tr.
Solved rowspan stacking issue
Two weeks of testing and only problem was it was not outputting certain rows' opening tags, which lead to rows not knowing when to begin. Now only problem left is rowspan across pages.
Update on update
So I have really tried everything I can to get DomPdf to do what it is suppose to do, which is rendering pdf's. I have read a bit more and found that this library has a long standing issue of not being able to render rowspan accross pages. Therefore, on to the next rendering library wkhtlmpdf or I could logically divide rowspans to stop at end of page and start again on new page. Will have to check my watch on this one.
I'm working on a project where I've made my phpmyadmin database spit out a set of 6 images on my webpage. I've put it into a table and this is where the trouble begins - even though it sounds easy!
I need the images to be in three's, in a horizontal line.
I will have 6 images most of the time so 3 per row with good spacing/padding etc.
I've tried a lot of things and played around with the CSS but couldn't get it to work.
Here are (respectively) the actual page and how it looks, the CSS for it and the actual code/script of the table:
Actual Page
CSS for the table: table.Evidence td {
padding:0px,10px,0px,0px;
}
Script for the table:
It looks very easy but I couldn't make it work.
Any help would be much appreciated!
I'm new so please bear with me until I get used to this.
The first thing is that if you define all 4 paddings in one command you have to seperate them with spaces.
table.Evidence td { padding:0px 10px 0px 0px; }
It also seems that you don't use the table tags right.
With an tr you are adding tan new row and with an td you are adding a new cell.
A table of 2x2 cells would look like:
<table border="1">
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
<td>
4
</td>
</tr>
</table>
Your <tr></tr> tags should be after every third image, so the if in your while should be:
if($i % 3 == 0){
echo "</tr></tr>";
}
else{
echo "<td><img something...></td>";
}
Also you must have one <tr> opening tag directly after the <table> tag, and one </tr> closing tag directly before the </table> tag.
Somehow I can't figure out the following: Alternate table row color using CSS?
If I use the code suggested in the aforementioned topic the even cells get colored (the first, third and fifth. There is a total of 5 cells in a row). It doesn't matter if I use 'even' or 'odd'.
td:nth-child(odd)
{
background: #f5f6fa;
}
If use the following code, all the rows get colored.:
tr:nth-child(odd)
{
background: #f5f6fa;
}
#svdh You've got tags outside of your body and html tags also which in a normal web page wouldn't be rendered. The problem with your HTML is you're setting up loads of tables instead of one with multiple rows. It should be like this.
<table>
<tr>
<td>One</td>
<td>One.</td>
</tr>
<tr>
<td>Two</td>
<td>Two.</td>
</tr>
<tr>
<td>Three</td>
<td>Three.</td>
</tr>
</table>
Fiddle here..
https://jsfiddle.net/fo7Ldfqs/
UPDATED:
If you've got multiple tables and you're trying to color every other one then just use:
table:nth-child(odd){background:#ff0000;}
Fiddle here.. https://jsfiddle.net/4641ph6u/
I have 3 buttons in a popup form. I want to align first button at the top and other two together at the second line/row. I have implemented the below method and failed where top button is top but not wrap the content and two buttons at the bottom mesh together. How i can manipulate the buttons?
This is my html:
<div>
<table>
<tr><td colspan="2">Btn1</td></tr>
<tr>
<td>Btn2</td>
<td>Btn3</td>
</tr>
</table>
</div>
How they look like:
Thank you.
The main problem you're having here is that you are trying to apply styles from the #acc_popup CSS selector to multiple elements on the same page.
id tags need to be unique in the DOM structure, and multiple occurrences of them will cause your styles or scripts to apply only to the first occurrence of the id.
Swap the id for a class.
In the HTML:
<td>Btn</td>
In the CSS:
.acc_popup {
//styles go here
}
Edit:
Now since you've informed us you're not doing this with css. This should do what you want.
Wrap the first button in a <td> and add colspan=2 to that element. If it isn't blatantly clear, this makes the table cell span 2 columns instead of the default 1.
<div>
<table>
<tr>
<td colspan="2">Btn1</td>
</tr>
<tr>
<td>Btn2</td>
<td>Btn3</td>
</tr>
</table>
</div>
I have the following code:
<tbody>
<tr class="listing_left">
<td>Info Here</td>
</tr>
<tr class="listing_right">
<td>Info Here</td>
</tr>
</tbody>
It is being pulled dynamically so that is for each product. So if I have 20 products, it shows that code 20 different times for each product.
I need each of those to link to a specific link. I tried wrapping the whole tbody in an anchor and that did not work. I tried wrapping the individual tr's in an anchor and that did not work.
If I wrap each TD in an anchor then that will work but the anchor is only for the specific text, it doesn't expand to the entire TR, which I need.
Any suggestions?
Well you can only have anchor tag within the td tag so I would suggest that you change your layout so you use divs instead of tables
Then you can do something like this:
<div>
<div class="listing_left">
Info Here
</div>
<div class="listing_right">
Info Here
</div>
</div>