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
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; }
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 a year calendar that shows just the way I want on normal browsers, but in responsive browser I want it to show all the months below each other, due to layout problems.
I know how to apply code to responsive browser - this is not what I am asking about.
I tried giving the td's the value of display:table-row, and its giving me almost the desired result .. it keeps pushing the rows to left and wont accept width:100% value, that's the problem.
Here is a link to the website I am working with www.5eren.dk
you need to set display:table on <tr> and set display:table-row on <td>. use this CSS:
.year-view>table>tbody>tr {
display: table;
width: 100%;
}
.year-view>table>tbody>tr>td {
display: table-row;
}
sir when i insert a long string data the table size comes out of the page as show below.
http://lh3.ggpht.com/_Um0yFxPtzJ8/S0G8dGp1EcI/AAAAAAAAACc/JOJGrM0U-dI/s800/untitled.JPG http://lh3.ggpht.com/_Um0yFxPtzJ8/S0G8dGp1EcI/AAAAAAAAACc/JOJGrM0U-dI/s800/untitled.JPG
should i userd table-layout:fixed;word-wrap:break-word;
as:
table { border-width:1 px; background-color: #ffffff; border-right-color: #828DAF; border-bottom-color: #828DAF; border-top-color:#828DAF; border-left-color: #828DAF; table-layout:fixed; word-wrap:break-word; }
but its nt working???
try this css
table-layout:fixed;word-wrap:break-word;
My suggestion would be to reduce your font size or add a div around your table and add overflow: auto; to it ... so an horizontal scroll bar appears when you have too much content in your table.
As Tommy said, you want to use "table-layout: fixed" in the CSS for your table.
Then you have at least three choices for what to do with table cells that have too much content:
Do nothing - they'll keep going outside their cell.
word-wrap:break-word will break in the middle of a word
overflow:hidden (on the TD, not the TABLE) will cause the rest of the text to be hidden; the user can expose more by making the window wider or decreasing the font size.