The aim is to print table with colored td-s. I need a way correct for all types of browsers.
Is there any way?
Join Stack Overflow to learn, share knowledge, and build your career.
The aim is to print table with colored td-s. I need a way correct for all types of browsers.
Is there any way?
For webkit browsers (Chrome and Safari):
body{
-webkit-print-color-adjust:exact;
}
Quote from here: CSS @media print issues with background-color;
IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.
Once that is set so it will print background colours and images, what you have there will work.
It is found in different spots. In IE9beta it's found in Print->Page Options under Paper options
In FireFox it's in Page Setup -> [Format & Options] Tab under Options.
a particularly ugly solution is to place position a .gif (or any form of vector graphic so the size can be changed) image in the table cell with height and width 100% then a negative z-index property.
I found @willert's solution a bit consistent and easy. I have developed it further, hope it helps you guys...
table {
margin-top: 20px;
border-collapse: separate;
border-spacing: 0px;
font:13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}
table td,
table th {
background-color: transparent;
z-index: 1;
border-right: 0;
border-bottom: 0;
width: 150px;
padding-left: 5px;
overflow: hidden;
height: 12px;
}
table th:before,
table td:before {
content: "";
padding: 0;
height: 1px;
line-height: 1px;
width: 1px;
margin: 10px -994px -996px -2px;
display: block;
border: 0;
z-index: -1;
position:relative;
top: -6px;
}
table th:before {
border-top: 999px solid #D6D6D6;
border-left: 999px solid #D6D6D6;
}
table td:before {
border-top: 999px solid #F9F9F9;
border-left: 999px solid #F9F9F9;
}
td div.grid_3{
overflow: hidden;
}
table .row td{
border-bottom: #d6d6d6 1px solid;
width: 110px;
}
There is no solution that isn't horribly ugly, like positioning image or ridiculously large border underneath the table.
It depends what you need those backgrounds for. If it's decorative, then it may be better not to force it.
If it's to highlight some table cells, you can use color border
in addition to the background. Borders are printed.
If it's very important that backgrounds are printed, then you may give users a PDF to print.
I've been playing around to solve this problem, and CSS content generation and modern browsers seem to provide a nice solution to this problem. NOT WIDELY TESTED, FEEDBACK WELCOME!
table {
border-collapse: separate;
border-spacing: 0px;
}
table td,
table th {
background-color: transparent;
overflow: hidden;
z-index: 1;
border-right: 0;
border-bottom: 0;
}
table th:before,
table td:before {
content: "";
padding: 0;
height: 1px;
line-height: 1px;
width: 1px;
margin: -4px -994px -996px -6px;
display: block;
border: 0;
z-index: -1;
position:relative;
top: -500px;
}
table th:before {
border-top: 999px solid #c9c9c9;
border-left: 999px solid #c9c9c9;
}
table td:before {
border-top: 999px solid #eeeeee;
border-left: 999px solid #eeeeee;
}
You will need to handcraft the details to fit your needs.
HTH
Judging from my research on this, you're not likely to find a CSS solution that covers everything. You might be able to apply a jQuery solution to this.
<style>
.cell_pos {
position: relative;
}
.cell_cont {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.img_color {
position: absolute;
top: 0;
left: 0;
z-index: 9;
width: 100%;
}
</style
<table>
<tr class="row1">
<td class="selected">
<div class="cell_pos">
<div id="cell_cont">Hello</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#row1 .selected).append('<img class="img_color" src="path/to/img.jpg/>');
)};
</script>
The question was a little vague so you would probably need some work around with the css with overflow
and setting cell/column widths. Hope this helps.
Just Use !important
in your CSS and it will print, in Chrome.
This works for me and wont affect your other CSS code:
@media print {
div {
background: #333333 !important;
}
}
For chrome you can use this:
-webkit-print-color-adjust:exact;
Or in print preview, tick the More settings->Background Graphics
For Firefox, you can't enable it using any CSS. You can enable it as follow (If you don't see the File, press Alt key once).
File->Page setup and tick the Print Background(color & images)
You can do a little coloring the background by putting the contents in as an input-tag of type submit and set value to John Doe. then use class or style to manipulate the coloring. Never the less the browser will change the forecoler to black so only use light backgrounds but it works (a little).
<td><img src="your_image" /></td>
This silly solution worked for me on Firefox and Chrome (Ubuntu).
Firefox: Open the print dialog box (shortcut: Ctrl+P) and goto Options
tab,
and make sure that the option Print Background Colors
is ticked.
Chrome: Open the print dialog box (shortcut: Ctrl+P) and expand More settings
and tick Background graphics
.
As far as I have tested, -webkit-print-color-adjust:exact;
doesn't work for Firefox and is honored in Chrome. But in both the browsers the final printing option overrides all that. So you can completely do away without it.
Try printing the following sample HTML page with and without the various settings described here and you will know.
<!DOCTYPE html>
<html>
<head>
<style>
body {
-webkit-print-color-adjust: exact;
}
</style>
</head>
<body>
<table style="border-width:1px;width:50%;">
<tr style="background-color:#999999">
<td>First Row</td>
</tr>
<tr style="background-color:#CCCCCC">
<td>Second Row</td>
</tr>
</table>
</body>
</html>
@media print
query which removes background colors from tables (e.g. stripes). – Martin Thoma Sep 22 '17 at 11:54Print Background Color
andBackground graphics
respectively to get the job simply done now. When these option are disabled then all CSS options become useless. – codeman48 Apr 6 '18 at 6:29