What is the best practice to print a HTML table that contains cells with about 5cm height that should not be broken to different pages.
I already made print.css and definied
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
But :
in Chrome the picture in the HTML page is split across pages
in Firefox, the first page is empty, the table starts at the second page and the rest of the table is cut away (page 3 empty again)
IE I did not dare to try yet
Browser support for the page-break CSS properties is spotty, especially on table parts. If you want to prevent page breaks within the content of a cell, I would suggest nesting the content in a div, and setting "page-break-inside: avoid;" on the div. If you need to support older browsers that don't implement the page-break-inside property at all, you should also set "display: inline-block; vertical-align: top;" on the div.
Also, be aware that if the height of the printable area (that is, page height minus top and bottom margin) is less than the height of your cell content, then it's impossible for the browser to avoid breaking it unless it can somehow warp the fabric of space (maybe Firefox has a "-moz-" property for that?).
Related
I've noticed there is a small amount of padding on one of my containers that i would like to remove entirely however the code i am implementing doesn't seem to be working.
CSS:
.elementor-container elementor-coloumn-gap-default {
padding-top: 0;
}
I think i may have the name of the element wrong. My website is www.monoalarms.co.uk/wp and i am trying to remove the padding from the container that contains that 5 buttons. it is directly under the header image.
You are looking padding in wrong container,
please try next css -
.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated { padding-bottom: 0; }
Seems your padding goes from banner
their could be many other css styles overriding yours. Remember CSS tries to take the last styling, so make sure yours is loaded last. You might need a more specific tag i.e 'body .elementor-container elementor-coloumn-gap-default', right click element and inspect in chrome, at the bottom of the browser you'll see the exact CSS tag it uses.
What does it mean when the tables are displayed incorrectly until I bring up the inspector, and then everything magically displays correctly?
I have a table to display, and I want borders around cells. Some of the cells simply do not display borders consistently. If I refresh the page, cells will be haphazardly outlined. If I then choose the Developer>Inspector option, then all the cells instantly become correctly displayed. Also, if I resize the browser, the table will display correctly. When I display the same page in Chrome the cells are always outlined. I think the real clue is that opening the inspector causes the table to display correctly ... what is the inspector doing? I am using version 53.0.2 of Mozilla.
Here is the table styles:
<style>
.statusTable {
width:100%;
}
.specialRow td {
padding:3px;
padding-top:20px;
background-color:#EEE;
}
.outlinedRow td {
padding:3px;
border-width:1px;
border-style:solid;
border-color:grey;
}
.statusTable tr th{
padding:3px;
}
</style>
There are two styles of rows, either 'specialRow' or 'outlinedRow'. When the page is refreshed I get this:
But if I start the inspector, the display is corrected:
Any ideas of what I should look for?
Edit 1
This is definitely NOT related to zoom. I see the same problem at any level of zoom. Refresh paints a haphazard grid at 100% scale, and the grid stays haphazard when I zoom in and zoom out. Sometimes, when zooming additional parts of the grid will disappear.
I has tested with border-collapse: separate border-collapse: initial and also border-collapse: collapse and the problem happens in all cases.
The problem was that the "tbody" tags were not matched. I had an opening <tbody> and another at the end of the block -- I did not have the slash. It is not surprising that causes a lot of problems with layout. However, strange thing is that bringing up inspector apparently goes and checks the validity of the HTML at that point in time, correcting the problem without any indication. Chrome seems to correct on the initial page load.
Fixed the tbody end tag and everything works correctly.
Note: I did notice a dependency on bootstrap. If I removed the bootstrap CSS files, the entire layout was broken, but the table borders were correct. I tried tags other than tbody and did not have this problem. So there is some indeterminate connection between unbalanced tbody and boostrap and borders, but I don't have time to find any more details.
I am trying to make a print-friendly resume. Everything is working, except for an issue regarding the background image.
I do not want to have any margin on the print page, since otherwise the background image looks messed up:
https://www.dropbox.com/s/h2zttd8u6r6hq0g/Screenshot%202015-01-08%2014.38.14.png?dl=0
However, if I do not use any margins, the background looks good but I am unable to do any margin on the second (or other pages):
https://www.dropbox.com/s/16vgu3nahfgeipr/Screenshot%202015-01-08%2014.38.55.png?dl=0
body {
margin: 30px 0;
}
That works for the first page, but unfortunately this does not work for any page breaks. Is there a way to do padding/margin in relation to the top/bottom of a print page?
Edit: sorry for the hideous example, but this is basically the code:
http://jsfiddle.net/yugv84qw/
If you press print and save to pdf (in Chrome at least), you'll see that the background fills the entire page. However, when you include
#page {
margin: 1cm 0;
}
You will see that the margin I want works, but then the background also uses that margin. In other words: I want the background to stay page filling, while there is a top and bottom margin for text on every page.
You are fairly limited by the vendor implementation of the CSS paged media module, that said, you are able to use the module to target the first page by using the :first psuedo selector, e.g.:
#page:first {
margin: 0
}
Should support / lack of implementation prove an issue- you will need to resort to adding your content into a series of elements which match the output page dimensions, then removing the margin/padding on the first.
Sadly, the control of printing from the web, even in this day and age, is not an easy process.
My page http://dl.dropbox.com/u/49912546/anchor_link_test.htm displays differently when an anchor is used too http://dl.dropbox.com/u/49912546/anchor_link_test.htm#vanquish-s - content below an image is moved up slightly
This happens consistently across browsers, so there must be something in the spec that means this is the correct behaviour... but what? It only happens when an image is loaded (if the src is invalid the bug doesn't happen).
*edit
By the way, I found a workaround already http://dl.dropbox.com/u/49912546/anchor_link_test_solved.htm#vanquish-s, so I'm not looking for bug fix - I just want to know why all browsers have CSS implementations that cause this behaviour.
half content appears to shift upwards because the .panel
its contained within is set to overflow:hidden & has content that is being clipped as a result.
When the browser attempts to identify the element in the named anchor it sees thats its within a container that can clip its content & so scrolls that element to the top to ensure its visible.
For example if you were to add any elements within contentInner but above the named h3, then they would not be visible on the page when the named anchor was used as half content is scrolled such that h3 is at the top. (The same result as if overflow:scroll were applied; the named anchor causes the scrollbar to position itself in line with the top of the named element)
In my case removing overflow:hidden worked
#maincontent {
width: 100%;
background: transparent;
/* overflow: hidden; */
clear:both;
}
I am trying to make a table-like calendar page, using fixed width and height block level elements. There is an outer container, which sets the width, and the cells get aligned by float: left. It works well in every browser, except in IE6, where the list gets split after the 29th element.
If I make the outside container a bit more wide (by at least 3 pixels) the problem gets fixed in IE6. Because the elements are more than 3 pixels wide, it doesn't change how the page looks. But I really don't understand why it happens, and what should I do not to make it happen.
I tried IE7.js, but it didn't help.
I know IE6 is such a buggy old browser, but while my sites are simple I prefer making them IE6 compatible.
link to the page in question
You can fix it by adding this to the bottom of style.css:
/* IE6 hack */
* html #naptar-list a, * html #naptar-list div {
width: 77px
}
This works by using the Star HTML hack to feed to only IE6 the declaration width: 77px (1px less than the actual width), which in my testing, fixed the problem: I'm not entirely sure why.