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'>
Related
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.
I am trying to do a module where I list orders between dates.
I have set the needed parameters in CSS like this:
#page {
size: A4;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
...
}
As header, each page should display the name of the buyer and the order number. I have managed to do this using a DIV having page-break-after: always CSS code after each order. This way each order begins on a new page.
The problem is that when I have too much items in the order and the orders are listed on more then one page. In this case on the second page I don't have the header displayed and I need it.
I have tried to use a div with css attributes like: top:0; position: fixed; but every single header gets displayed on all the pages, which is not good.
UPDATE:
I need the header of the actual order each page of the order. So if I have i.e. 40 items in an order (which does not fit into one page) then I need the header of this order listed on both of its pages.
This is how it works with position:fixed:
After hours of different unsuccessful tries (1. using exact width font like Courier New and calculating the height of each item, 2. using javascript, jquery to see if the bottom of each item exceeds the limit of space for a page, I've put pagebreak, etc...) I have found the best solutions for this here .
If you use
thead {display: table-header-group; }
the header is displayed on each printed page's header. The same is true for tfoot:
tfoot {display: table-footer-group; }
So my table with a lot of data overlaps my footer on my print page, how do i make when the data is about to reach the footer the remaining data will go to the second page, here is the ss:
here you can see that the table with data overlaps my footer(starting with the "NOTE:")
here is my code for the footer:
<div class="divFooter" style="display:block;position:absolute;width:100%;bottom:0px;">
<div class="row" style="font-size:12px;"><div class="col-md-12">
<div style="width:100%;height:20px;border-top:1px solid #E8E8E8;border-bottom:1px solid #E8E8E8;background:color:"><p style="margin-left:10px;">NOTE:</p> </div>
<div style="height:100%;width:50%;border-right:1px solid #E8E8E8;float:left;">
sample fiddle https://jsfiddle.net/h6y4srez/
Quick question regarding this table.
The footer you have coded. It seems to be entirely related in subject to that of the main body of the table. Is this correct?
If so, can you simply not put the end part within a <tfoot> tag, thus joining it to the table proper and preventing it from running over any other content?
In your CSS:
thead, tfoot { display: table-row-group }
This makes them render as normal rows, without attempting to repeat them when there is a page break.
i need to create a table with the first column fixed and the rest of the columns scrollable horizontally.
I managed to implement this successfully BUT when i implement it in my website it doesn't seem to be working.
when i make the table head fixed, the first column breaks the layout
when i use this with a plain table it works but not with my theme
.table-wrapper th:first-child {
position: fixed;
left: 5px
}
Table which works without the css : http://www.vidznet.com/table/2.html
Table with css : http://www.vidznet.com/table/1.htm
can someone tell me what might be conflicting?
Update:
what i need is the first column to be fixed and the scrollbar to start from the second column like this
It should be like this: http://vidznet.com/table/table1.jpg
but in my css theme it looks like this http://vidznet.com/table/table2.jpg
The problem is with your CSS property:
.table.table-striped > thead:first-child > tr > th:first-child {
width: 25%;
text-align: left;
}
The width is too large for the column. It needs to be changed to 5 to 12%, depending on how you want how far you want the underline to go, to fit in with the other fixed elements.
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.