如何使用CSS格式化HTML表格进行打印？

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 (eg in pixels), you probably need to reconsider this part of your design. If you are using colors to convey essential information (eg, red cell standing for absence, green for presence), you need to reconsider this decision.

Answer 2

使用CSS样式表的media="print"属性具有特定于打印的布局。

Answer 3

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

Answer 4

you can add media specific css styles to a page using the @media Rule

for example , @media screen will use the styles for computer screens and @media print is used for printers.

using @media all will make sure your styles are applied to all media type devices

follow link for more on media types

Answer 5

You can also use

body {
-webkit-print-color-adjust:exact;
}

Answer 6

Correct all good answers.

What I would do is to make a specific css file just for print and attach it to the page:

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