[RESOLVED] Hide table on print - HTML Forums

Reiss · 11-06-2009, 02:52 PM

Hi guys,
I have a form that I've added a javascript print button to:

HTML Code:

<script>
document.write("<input type='button' " +
"onClick='window.print()' " +
"class='printbutton button' " +
"value='Print Form'/>");
</script>

I would like to hide an entire table on print using CSS. I've created a stylesheet and linked to it:

HTML Code:

<link rel="stylesheet" type="text/css" href="../print_styles.css" media="print">

this style sheet just contains:

HTML Code:

@charset "utf-8";
/* CSS Document */

.hide_on_print
{
	display:none;
}
#hide_on_print
{
	display:none;
}

and the table is:

HTML Code:

<table width="95%" border="0" align="center" cellpadding="0" cellspacing="2" class="hide_on_print">

When I print it out, the table is still visible, I'm only printing them out with a PDF printer as I'm out of paper, but I would assume the results would be the same from the real printer.
Any one have an idea what's wrong or how to achieve this?

thanks

coothead · 11-07-2009, 06:59 AM

Hi there Reiss,

have a look at this example, it should, hopefully, point you in the right direction.

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>@media print methodology</title>

<style type="text/css">
#printbutton {
    display:block;
    border-width:3px;
    border-color:#fc9 #c96 #c96 #fc9;
    margin:auto;
    background-color:#f93;
    font-size:20px;
    font-weight:bold;
    color:#600;
 }
#header1 {
    font-size:20px;
    text-align:center;
 }
#header2 {
    display:none;
    font-family:'times new roman',serif;
    font-size:20px;
    color:#666;
    text-align:center;
 }
#thetable {
    border:2px solid #999;
    margin:auto;
 }
#thetable td {
    width:324px;
    height:200px;
    border:1px solid #333;
    background-color:#fc9;
    text-align:center;
}

@media print {
#printbutton, #header1, #thetable {
    display:none;
 }
#header2 {
    display:block;
 }
}    
</style>

<script type="text/javascript">
function init(){
   but=document.createElement('input');
   but.setAttribute('id','printbutton');
   but.setAttribute('type','button');
   but.setAttribute('value','Print Form');

   document.getElementById('buttonHolder').appendChild(but);

   document.getElementById('printbutton').onclick=function() {

   window.print();
  }
 }

if(window.addEventListener){
   window.addEventListener('load',init,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',init);
  }
 }
</script>

</head>
<body>

<div id="buttonHolder"></div>

<h1 id="header1">This is a table</h1>

<h1 id="header2">The button and the table are hidden for printing</h1>

<table id="thetable"><tr><td>Table cell</td></tr></table>

</body>
</html>

Reiss · 11-07-2009, 09:41 AM

Hey coothead,
That's perfect! I just learned to hide/change all my styles on print thanks to @media print {

You don't know how much work that has just saved me!

thanks

coothead · 11-07-2009, 11:14 AM

No problem, you're very welcome.