display table borders on printout vs. screen

Forum Moderators: not2easy

Message Too Old, No Replies

display table borders on printout vs. screen

print vs. screen style

naturalblue

10:53 pm on Dec 1, 2009 (gmt 0)

I have a table that I want to appear borderless on the screen but bordered when printed. I know this is possible (or I should say I've read about it somewhere), but need help with implementation. I'm using both a print and a screen css.

Also (while I'm here), I've tried every which way to change my font to serif for the printed page but have been unsuccessful. What could be interfering with the simple font styles in the print css?

Thanks!

swa66

1:27 am on Dec 2, 2009 (gmt 0)

I long ago stopped using different external stylesheets for print and screen media as the browsers load all of them anyway (creating an extra unneeded hit without any benefit).

Instead I use inside the normal extrenal CSS file:


@media print {
 .title {padding: 0;}
 .interactive, #crum, .ads {display:none;}
}

Make sure specificity is high enough.

naturalblue

4:01 pm on Dec 2, 2009 (gmt 0)

Thanks, swa. I will combine the two.

Any answers to the questions?

swa66

7:11 pm on Dec 2, 2009 (gmt 0)

I don't really see the problem, but here's an example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Test</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
      body {
        font-family: arial, helvetica, sans-serif;
      }
      table {
        border-collapse: collapse;
        margin: 10px;
      }
      table td, table th {
        border: 1px solid black;
      }
      @media print {
        table td, table th {
          border: none;
        }
        body {
          font-family: serif;
        }
      }
    </style>
  </head>
  <body>
    <h1>TITLE</h1>
    <table>
      <tr><th>11</th><td>12</td><tr>
      <tr><td>21</td><td>22</td><tr>
    </table>
  </body>
</html>

naturalblue

11:49 pm on Dec 2, 2009 (gmt 0)

Thanks, swa. Actually, I need the border to show when printed, but not on the screen. So I used the style code you provided and specified a border of 1px and border color of #000000. Still, tho, I get no border when the page is printed, as well as no serifed font.

Here's the style code:

Any thoughts?

swa66

3:01 am on Dec 3, 2009 (gmt 0)

Mmm. You know about specificity ? If not look it up. It's critically important in how CSS works.

Also a shorthand notation like border is trickier than it might seem as it reset the other values it could set to their default, I'd be carful wielding it..

Anyway this works in FF, Opera and Safari:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Test</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
      body {
        font-family: arial, helvetica, sans-serif;
      }
      table {
        border-collapse: collapse;
        margin: 10px;
      }
      table td, table th {
        border: none;
      }
      body h1 {
        color: red;
      }
      @media print {
        table td, table th {
          border: 1px solid black;
        }
        body {
          font-family: serif;
        }
        h1 {
          color: green; 
          /* specificity prevents this from being used */
        }
      }
    </style>
  </head>
  <body>
    <h1>TITLE</h1>
    <table>
      <tr><th>11</th><td>12</td><tr>
      <tr><td>21</td><td>22</td><tr>
    </table>
  </body>
</html>

Note that I use the same selectors (i.e. same specificity) where I override it in the print style and that the print styles come AFTER the normal style.

Note that I changed the color of the h1 to red in the normal style with a higher specificity than I'd normally do, and that overruling it now with a lower specificity selector in the print sheet doesn't work anymore. It stays red in print.

You can used linked styles instead of adding the CSS in the header as I do in these small examples.

Build it up from something simple. always make sure your code is valid, and keep an eye on specificity and order (if the specificity is the same).

naturalblue

3:04 pm on Dec 3, 2009 (gmt 0)

Thanks, again. Looks like I've got some studying and practice to do.

I appreciate your time.

naturalblue

6:54 pm on Dec 7, 2009 (gmt 0)

I got the result I wanted--borders appearing only when tables are printed--by using the following code in my stylesheet:

@media print {
table, table tr, table td {
border-top: #000 solid 1px;
border-bottom: #000 solid 1px;
border-left: #000 solid 1px;
border-right: #000 solid 1px;
}
}

Thanks for your help!