How to format an HTML table using CSS for printing?


Tags: html,css

Problem :

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?



Solution :

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.


    CSS Howto..

    How to make the background image responsive

    How can I override Pseudo Classes in CSS3

    How to resize an image in pure HTML/CSS while keeping its proportions?

    How to add next / previous buttons to Surface tablet touch-slideshow?

    Jquery/CSS, how to have and access multiple (left) panels, while adjusting main content container automatically

    How to apply css to asp.net LinkButton?

    How to build native C++ apps with HTML/CSS UI?

    How to override a link tag with another in css

    CSS frustration: How to center floating images of different widths inside LI tags?

    how to make this div margin to zero and more nature [closed]

    How do I make it impossible to highlight text using CSS?

    How to use random array output as a for-loop CSS attribute in jQuery

    how to make background image stretch vertically

    How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

    How to stop these two divs/navbars from overlapping in Bootstrap

    How to hover a whole element to show details

    How to animate 2 parallel lines in order to form an X on click using CSS and JQuery

    How to place an element in top of another using CSS (without using absolute position)?

    How to create nested diamond shape using CSS?

    How to: mob-responsive menu that will always have a height:100% and show all
  • s although the body gets position:fixed when the list is displayed
  • How can i find and change css style in ruby?

    how to align button radio in css

    How to apply CSS to a DialogBox using ClientBundle?

    How do I use the CSS box-model to make sure my body is spaced from the edge of the window despite being 100% high?

    how to stack elements using CSS

    how to adjust width of first cell of a table using CSS

    How can I select complete
  • element in navigation bar when hovered or selected?
  • How to create a scrolling background image with css/jquery/html

    How to figure out which lines of css is not actually affecting anything again?

    CSS Matrix - how to achieve percentage translation