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.
Related
I'm trying to troubleshoot a fairly simple page which has a nested table in it and gives me an unwanted horizontal space for some reason. I removed most of the code until all I'm left with are the tables and the space still exists.
<table>
<tr>
<td>
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</td>
</tr>
</table>
I can get around this using divs but I'm wondering if someone could explain this to me, I feel like I'm missing something very basic here.
jsfiddle - http://jsfiddle.net/jeo3ya9n/
Inspecting the DOM in IE shows me an empty line between the first TD and the table, inspecting in Chrome shows me:
"
"
at the same spot. Deleting those removes the unwanted space but I'm not seeing what causes them in the code.
This is one of many of IE's layout bugs, which are irritating to fix.Few suggestions:
1) Set the containing cell's padding-top to 0em
2) Set the nested table's margin-top to 0em
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.
I want to space the headers above the form unevenly on one line and not really sure what the best way to do this using HTML and CSS. I have used span tags and padding in the past but this works differently in different browsers and does not line up correctly. Im sure there is a better way then wrapping all of the headers in span tags. Thanks so much for your help. I have attached an image of what I would like to achieve.
If you use a table, the cells will auto size to the content in them. Tables are still useful when dealing purely with tabular data. Alternatively, you can assign a class to each header cell to set specific widths.
<table cellpadding="5" cellspacing="5" width="100%">
<tr>
<td>one</td>
<td>this one needs more space and will grow</td>
<td>this guy isn't as long</td>
<td>short</td>
</tr>
Example on JSFiddle: http://jsfiddle.net/JdSy2/
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.
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.