I have a table with large number of rows which can span multiple pages during printing. I am having a few issues getting the table to render correct on page breaks.
The first issue is that I have my thead repeating on every page but sometimes it so happens that it prints it to the last row of the previous page and at times just writes over the last data row.
Another issue I'm having is that I have top and bottom margins set as 1cm on the page but the rows disappear beneath the margins. So, if I have the last row on the previous page as row 18, I get row 21 on the next page. Rows 19 and 20 disappear beneath the margins.
This is the margins css:
#page {
size: auto;
margin: 1cm 0;
}
#page:first {
margin: 0;
}
If I don't use #page:first, then the 2nd issue about rows disappearing beneath margins gets fixed but I do not need margins on the 1st page.
This is the css relating to my table:
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto;}
td { page-break-inside:avoid; page-break-after:auto; }
thead { display:table-header-group }
I'm using chrome for this.
Try adding border-collapse: collapse; to <table>. Worked for me for whatever reason.
Related
I am currently working in a HTML-editor of a CRM software, so I am limited to HTML and CSS.
Within an invoice there is a table of items, description, amount, price etc. In some cases the description is to long to fit into one page, for example if there are more products. In the beginning the element was just put to the next page. But I wanted to let the description split, so I added:
tr {page-break-inside: auto;}
That works, but on the second page the splitted content is shown in the header of the table.
I tried page-break-inside=avoid; page-break-after=avoid in the tr of the table header and in the styling elemt of the table.
I expected that only the content in the cells is split and not the content of the cells into the table header.
I am looking for a solution to make the table header fixed and avoid overlapping of the splitted content.
I tried to work with these attributes but theader is always overlapping.
table { page-break-inside:auto }
tr { page-break-inside:auto; page-break-after:auto }
thead { display:table-header-group }
This is how the table header looks like:
<thead style='display: table-header-group;';>
<tr style='height:32px;position: relative; z-index: -1;page-break-inside:avoid; page-break-after:auto'>
How do I print a div element so that it is positioned towards the bottom of the page it is on, but is not a footer and is to be printed once only no matter how many pages there are to print (when I set it as a footer it apparently started printing itself on every page)
Also, if there is not enough space on the page to have it printed, it is to jump to the second page.
What it is
I have a div block that is a legend for a table. It describes fields of the table in more detail.
Things I have tried so far
I have tried the fixed footer approach:
#media print {
#legend {
position: fixed;
bottom: 0;
}
}
Somehow it started printing my legend on all pages and not just the first page where I need it. Also when my table is too long, it overlaps the legend. That is not desirable. I am not sure how to proceed.
I seem to be having some success with
#media print :first {
#legend {
position: absolute;
bottom: 0;
}
}
and then programmatically breaking up the table in my code, to where i.e. after row 25 I insert a class into the row to force a page break. Or after row 25 stop this table (</table>), restart a new 2nd one (<table>), which will flow onto the next page
i want to break my table in the middle, as you can see at the picture. i want to break the table, so the table will stop at 10 and continue number 11 at the next page. how should i do it?
this is my css.
table.item {
width: 100%;
height: 190px;
page-break-after: always;
border-collapse: collapse;
}
and it's work, i just need to move the number after 10 to the next page / the table exceed the height.
if i use overflow : hidden;
it sure to hide the row but not showing at the next page. any 1 have idea?
thanks for your time sire. best regards
So i have this generated page i want to print - http://hubog-2017.com/print_prog_en
I break the page after each table. In the second table, one of the texts is too long and it breaks into two pages (Pages 2 and 3). Now the problem is that the text gets outside its TD and i see it on the THEAD.
I tried using word-breaks and padding's with no success.
Managed to get a partial solution by adding this CSS:
Its not exactly how i wanted it to look but at least the text is not breaking...
#page {
size: A4;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
}
I have some HTML tables generated by a program I wrote. I had the width attribute set on all the cells in the first column because I wanted it to stay a specific width. In one of the files, however, it wasn't wide enough, so I figured it was because of a really long entry causing it to shrink to accommodate it. So I changed it to min-width. But now the whole table is expanding past the edge of the screen. What I want to do is have the first column fixed at 80 points wide, but the other two columns to be sized automatically based on their contents. But I don't want the table to be wide enough that you have to scroll horizontally to see the whole thing. Vertically is fine of course, for obvious reasons.
Here's the CSS I'm using (td.time refers to the table cells in the leftmost column, the one fixed at 80 points):
table { border:none; }
tr:nth-child(odd) { background-color:#eeeeee; }
tr:nth-child(even) { background-color:white; }
td { padding:0; margin:0; }
td.stricken { text-decoration:line-through; color:gray; }
td.time { font-family:'Courier New', monospace; font-size:10pt; width:80pt; }
And here's a link to the HTML file that uses that style sheet and has the problem: http://norton1.dyndns.org/tppupdates/heartgold.html.
For those who are wondering, it's a list of everything posted to the Twitch Plays Pokémon HeartGold live updater on Reddit.
I found you problem. It's one of the dummies writing that they "dropped a whole bag of doritos." Scroll down to 6/02/2014 12:32:35AM. That line right there is causing your problems.
Add this to your CSS
table tr td div p {
word-break: break-word;
}
This will break entire words and links and make them not push the table out.