How to format an HTML table using CSS for printing?

Question

I want to format table using CSS to show an attendance sheet. How do I add CSS styles to the table so that it can be printed?

Answer 1

Within your style sheet, use

@media print {
  /* put your CSS rules if they are to apply in print only */
}

For example,

@media print {
   * { color: black; background: white; }
   table { font-size: 80%; }
}

The details depend on the types of problems you expect to have with printing your specific table. Generally, if you have set fixed column widths (e.g. in pixels), you probably need to reconsider this part of your design. If you are using colors to convey essential information (e.g., red cell standing for absence, green for presence), you need to reconsider this decision.

Answer 2

use following css

table, th, td
{
  border-collapse:collapse;
  border: 1px solid black;
  width:100%;
  text-align:right;
}

also you can use media="print" for print specific layout