I have a table which is OK in web pages, but when printing my table (ctrl+p) it breaks not the way I want. The last row of the first page splits with the part of the row on the first page and the other part of the row on the second page. So, is there any way to overcome the problem, the rows can have different content and size. I also tried this properties
page-break-before/after: auto. page-break-inside:avoid;
but with no result. Is there any way to break the table and move the part of the table to the next page without splitting the last row into two parts for print media? Any help will be appreciated.
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<th><span>Firstname</span></th>
<th><span>Lastname</span></th>
<th><span>Points</span></th>
</tr>
<tr>
<td><span>Jill</span></td>
<td><span>Smith</span></td>
<td><span>50</span></td>
</tr>
<tr>
<td><span>Eve</span></td>
<td><span>Jackson</span></td>
<td><span>94</span></td>
</tr>
<tr>
<td><span>John</span></td>
<td><span>Doe</span></td>
<td><span>80</span></td>
</tr>
/*here I have many <tr> elements*/
</table>
</body>
</html>
If I understand correctly, you want your table to break only between rows and not within them. You can accomplish this in Firefox and Internet Explorer with the following css rule:
tr {page-break-inside: avoid;}
Unfortunately, that doesn't work in other popular browsers, such as Chrome.
As has been suggested, you can prevent page breaks within the content of an individual cell by wrapping it in a div that has "page-break-inside: avoid;" set on it, but if the content height varies within the row, you'll still end up with parts of the row on two different pages.
If you really want to solve this problem and are willing to throw some javascript at it, I have posted a solution here that should do the trick.
You can request a page break, which will be invisible on the screen, but will force the element to a new page when you print. But the rules are more subtle than you might expect.
The CSS property page-break-before:always can only by applied to a block element. Not an inline, or anything odd like a table-row or a list-item. So do not style the row or cell, nor even a <tbody> or a <br/>. And it cannot be an element that the browser is allowed to omit, so you cannot just throw in an empty <div> with the style on it. One has to add a <div> or <p> around the first cell contents, for instance, to give the style.
Likewise page-break-after:always can be applied to something similar at the end of the previous row. I find this totally annoying, as what I always want to protect is a row, or a grouping.
Some browsers may also want you to change the style of your table to page-break-inside:auto, as the default style for a table is often already page-break-before:avoid.
Since it is the default style, adding it does not help. The browser is already avoiding breaking your table as much as it is willing to. But failing to remove it easily makes the other options useless, especially in Chrome.
Related
Here is some very simple HTML. On Chrome (v57) and Firefox (v55) the two cells to the right are the same height, and on Safari (v11) they are not. On Safari the top cell is only as big as needed for the content, and the bottom cell gets the rest of the space.
My question is - is one of these behaviours correct and one a bug? Is there something simple I can do to get Safari to produce the same results as Chrome (like is there a browser styling difference at play here)? I've inspected it and there are no user agent stylesheet differences that I can see.
img {
max-width: 100%;
display: block;
}
.image-cell {
width: 150px;
}
<table border=1 cellspacing=0 cellpadding=0 bgcolor="#3faaed">
<tr>
<td rowspan="2" class="image-cell">
<img src="http://www.rizwanashraf.com/wp-content/uploads/2009/04/gorgeous-chrysanthemum-3d-wallpaper.jpg" />
</td>
<td>Top Cell</td>
</tr>
<tr>
<td>Bottom Cell</td>
</tr>
</table>
I know there are a limitless number of ways that I can produce a image with two equal sized boxes next to it - that isn't the question. The question is, why the difference, and, can simple styling be added to homogenize them? (This is a learning question, as I say, there are a million ways to display two boxes beside a box. That's not what I'm asking.)
The spec leaves this explicitly undefined:
CSS 2.2 does not specify how cells that span more than one row affect row height calculations except that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.
This means in particular that CSS does not define how the height of a cell spanning more than one row is distributed across the rows that it spans.
There is no good way to homogenize the table's appearance except by providing absolute heights to the table and/or the table rows. Given an arbitrary image whose height is not known in advance, this is pretty much impossible with CSS table layout.
Table cells are rendered arbitrarily depending on their content, so you can never be sure how they are going to be rendered. Specifying dimensions is the way to get specific results.
I'm a newb to CSS. I have a page that where an html table is generated at runtime by a bunch of tags. However,data is generated only in one of those cells and the adjacent cells end up being empty.
<tr>
<td> Really long data that is forced to wrap around.</td>
<td> empty cell</td>
<td empty cell </td>
</tr>
Is there a clean(cross browser compatible) way to get the first cell to span multiple columns via CSS without force a wrap around. Ideally, one would set the colspan on the first cell to get it to stretch multiple cells but since the html is generated on the server, this isnt much of an option.
This is the closest set of solution Ive found to my question and it doesnt seem to solve the problem.
Looks like you are trying to use tables for presentation, rather than tabular content. You should give a look into display: flexbox which may help you achieve the effect you want.
Here is a great tutorial https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am trying to display a couple of iframes such that both of them take up the width of the screen, but the first iframe on the left is only wide enough to display all its contents. I have seen several solutions that use javascript, but I'm not understanding why this is necessary and I would really like to accomplish it using only CSS3.
I have been reading some of the CSS3 spec ( http://www.w3.org/TR/css3-box/#Calculating ) and although it is a bit difficult to understand, it seems like it should be using "shrink to fit" if I specify an auto width. However, it does not do this. For instance, in the code below, frame1.html contains the same contents as the first td in the second table, and frame2.html contains the same contents as the second td in the second table:
<!doctype html>
<html>
<head>
<title>Frame Test</title>
</head>
<body>
<table>
<tr>
<td><iframe src="frame1.html"></iframe></td>
<td><iframe src="frame2.html"></iframe></td>
</tr>
</table>
<table>
<tr>
<td>Hello</td>
<td>Goodbye ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</td>
</tr>
</table>
</body>
</html>
However, there is a bunch of extra space in the left iframe. Why? My best guess is that either somehow the iframe is inserting extra space in the outer tags (e.g. the html or body tags), which seems unlikely because firebug says most of the space is in the actual text, or else the auto width calculation is somehow different from iframe than it is for td. (A clear, easy to understand explanation of the algorithm involved would be nice!) I have tried various settings for width and height propogating all the way up to the html tag, but I can't seem to get anything to work.
Why isn't it shrinking to fit, so it only uses the space actually taken up by its elements?
I imagine it's because an iframe doesn't actually contain its "contents" in an HTML/CSS sense.
It's easy to style things on the actual DOM, and that's what CSS is for. But an iframe is a window to a completely different DOM, independent of the parent. The parent page has no knowledge of the "contents" of the iframe and therefore can't style the dimensions of the iframe to match those contents.
As many, many people will suggest... You should really try to avoid frames. In my experience they're more trouble than they're worth. It's considerably easier to maintain the styles and behaviors within a single DOM.
I have been using the page-break-after command to break an html report after each "grouping". My problem is it is now leaving my table floating in the middle of the page. Each page is different where it puts the table, sometimes at the top of the page, sometimes in the middle and sometimes at the bottom. There is quite a bit of complexity in the HTML so I decided to take an image instead:
I will try to sum up the html
<body>
<table>
<thead>
{this is top bold box on each page}
</thead>
<tr>
<td>
<table> {this is the results table}
<thead>
{this is the headers of the "floating" results table}
</thead>
{tr's of data here}
</table>
</td>
</tr>
</table>
</body>
we are using display:table-header-group to get the table headers to show up on each page. Can you help me figure out what I need to do to get those tables to be at the top of the page? (this is in IE8)
Impossible to tell from the information provided. Obviously, a CSS issue but can't tell where to begin. Common problems are the display CSS not completely accounted for in the print CSS and, using display:none; on an child element inside of a div tag that has height defined (removes the content but the space is still there.) The latter is what I suspect. I've found adding background colors to various elements very helpful in debugging CSS problems such as yours.
Is it possible to repeat table headers in Safari on every printed page?
This code works in Firefox but not in Safari:
<table>
<thead>
<tr>
<td>Header1</td>
<td>Header2</td>
</tr>
</thead>
<!-- lots of rows -->
</table>
Edit:
the following doesn't fix it, therefore it can't be the same bug that IE has:
thead { display:table-header-group; }
To answer my own question:
After googling and getting no correct answer I think that there exists simply no method to accomplish it. Maybe later versions of Safari will include it.
You could consider reprinting the thead periodically as you go down the table. If the table is rather long, this might prove beneficial even when viewed on screen, as the header will most likely scroll off the screen pretty quickly. If you don't want to show it on screen, though, you could add a class to the reprinted headers, hide them on screen, and display them only in the print stylesheet.
You may want to consider creating a CSS sheet for the printed version of your page. If you opt for that route, use the "position:fixed;". Elements positioned as 'fixed' are printed on every printed page.
The tricky part is that any positioned element (i.e. position property is not 'static') is taken out of the document flow. This makes alignment, of other (regular flowing) elements with the fixed elements tough.
Based on the information in your question, I would wrap the entire table in a fixed element (or create a class such as .printedTable with the position property set to fixed). This way, the table structure would repeat on each printed page.
Good luck.
A.