Home/ Questions/Q 3352752
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T02:04:05+00:00

I wish to let client to have a pretty print page from a web

  • 0

I wish to let client to have a pretty print page from a web page.

Hence, I change the following line from

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

to

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

The content of screen.css and print.css are the same.

However, for print version, I realize all my CSS style had gone. Table color, padding, margin, font… all gone. and when I view under FireBug, it seems there is no style.

May I know anything I had missed out?

print.html

<html>
<head>
<title>
</title>
    <link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>
<body>
<div>

<div class="main-title">Worksheet</div>               

<div class="header-table-container">
<table>
  <tbody>
  <tr>
    <th>House Address</th>
    <td>33, Robinson Road.</td>
  </tr>
  <tbody>
</table>
</div>

<div class="main-table-container">
<table>
  <tbody>
  <tr>
    <th width="10%" rowspan="2">Parts</th>
    <th width="90%" colspan="4">Doraemon</th>
  </tr>
  <tr>    
    <th width="25%">Trial 1</th>
    <th width="25%">Trial 2</th>
    <th width="25%">Trial 3</th>
    <th width="25%">Range</th>
  </tr>
  <tr>
    <td class="numerical">1</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>    
  </tr>
</tbody></table>
</div>

<div class="main-table-container">
<table>
  <tbody>
  <tr>
    <th width="10%" rowspan="2">Parts</th>
    <th width="90%" colspan="4">Doraemon</th>
  </tr>
  <tr>    
    <th width="25%">Trial 1</th>
    <th width="25%">Trial 2</th>
    <th width="25%">Trial 3</th>
    <th width="25%">Range</th>
  </tr>
  <tr>
    <td class="numerical">1</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>    
  </tr>
</tbody></table>
</div>

<div class="main-table-container">
<table>
  <tbody>
  <tr>
    <th width="10%" rowspan="2">Parts</th>
    <th width="90%" colspan="4">Doraemon</th>
  </tr>
  <tr>    
    <th width="25%">Trial 1</th>
    <th width="25%">Trial 2</th>
    <th width="25%">Trial 3</th>
    <th width="25%">Range</th>
  </tr>
  <tr>
    <td class="numerical">1</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>
    <td class="numerical">0.000</td>    
  </tr>
</tbody></table>
</div>
</body>
</html>

print.css

body {
    color:#000000;
    font-family:Helvetica,Arial,sans-serif;
    font-size:small;
}

table {
    border:1px solid #BBBBBB;
    border-collapse:collapse;
    border-spacing:0;
    clear:right;
    margin:1em 0 0 1px;
    font-size:small;
}

th  {
    background-color:#E5ECF9;
    border:1px solid #BBBBBB;
    font-weight:bold;
    padding:3px 6px;
    text-align:left;
}

td {
    background-color:#FFFFFF;
    border:1px solid #BBBBBB;
    padding:3px 6px;
    text-align:left;
    vertical-align:top;
}

th.numerical,
td.numerical {
    text-align:right;
}

.main-title {
    text-align:center;
    font-weight:bold;
    font-size:large ;
}

.header-table-container {
}

.main-table-container {
    float:left;
    margin:0px 20px 0px 0px;
    width:30%;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You say you changed the line to media="print"… I take it that you do not have a media="screen" stylesheet on the page anymore then? Further, you’re looking at the page in Firebug, and the styles are gone?
    You seem to have some misconception about what you have done…

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

    means “use the stylesheet screen.css whenever displaying this document on screen.

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

    means “use the stylesheet print.css whenever printing this document.

    print stylesheets only apply when the page is printed. screen stylesheets only apply when the document is displayed on screen. If you only have one or the other, your page only has styles either if it’s displayed on screen or printed. In your case, the page should look fine printed, but have no styles when viewed on screen. If you want it to be styled in both cases, you need to link two stylesheets, one for screen and one for print.

    Having said that, most browsers apply the screen stylesheet also when printing, unless you specifically include a print stylesheet. I.e., if both stylesheets are identical anyway, you probably don’t need to include a separate print stylesheet.

    • 0