如何应用css打印div

Question

I am currently working on a project which was already done now it requires some enhancement.I will give you a slight jist of it.It has a search functionality and after clicking that name displayed in the result it displays additional details.Now the client has asked to add the print option also,which will print the displayed .I have also implement this functionality.Now the main problem is that the print preview page does not take any css of the last page.I have used css int the HTML page only.Please see the code.I have referred Print the contents of a DIV question .But it uses css externally.How could I use it when I have defined it internally. I know this might be a very basic question But I am very new to the CSS world. Thanks in advance...`

Edit: I have applied the @print tag.But it was not taking the css even after that.Thats why I have voted to remain this question as unique

PS I didnt code this piece of shit, someone else did .

  <script type="text/javascript"> function printDiv(divName) { var printContents = document.getElementById(divName).innerHTML; '.td{'+ ' width:205px;'+ 'margin-top:10px;'+ 'margin-bottom:10px;'+ 'margin-left:10px;'+ '}'+ 'table{'+ 'border-collapse:collapse;'+ 'border:1px solid #FF0000;'+ '}'+ 'table td{'+ 'border:1px solid #000;'+ '}' '</style>'; w=window.open(); w.document.write(printContent); w.print(); w.close(); } </script> 

  <style type="text/css"> body { margin: 0; padding: 0; background: #FFFFFF; color: #000000; font: 85% "Open Sans", Tahoma, sans-serif; } .dataGrid { border: 1px solid #48627A; padding: 0; width: 99%; height: 100%; background: #FFFFFF; text-align: left; } .title { color: #004e90; font-weight: bold; font-family: "Open Sans", Tahoma, sans-serif; font-size: 12px; } .res td{ font-size: 12px; font-family: open sans, arial; border-top: 1px solid #ddd; width: auto; padding: 4px; } .dataGridTitle{ border: 1px solid #0D1115; padding-top: 1px; padding-right: 3px; padding-bottom: 1px; padding-left: 3px; background: #48627A; color: #FFFFFF; text-align: center; font: bold 0.8em verdana, arial, helvetica, sans-serif; } .dataGridElement{ padding-top: 1px; padding-right: 3px; padding-bottom:1px; padding-left: 3px; background: #E8EAEA; color: #000000; font: 0.8em verdana, arial, helvetica, sans-serif; } .td{ width:205px; font: verdana, arial, helvetica, sans-serif; } <form> <div id="print"> <div class="dataGrid" style="margin-top:10px;margin-bottom:10px;margin-left:10px;" > <h1 style="margin-top:10px;margin-bottom:10px;margin-left:10px;" >Partner Details</h1> <table class="res" style="table-layout:fixed; margin-top:10px;margin-bottom:10px;margin-left:10px;" > <tr> <td class = "td title" ><label for="username">Name</label> </td> <td ><label for="username">{$item.partnername}</label> </td> </tr> <tr> <td class = "td title" ><label for="surname">Address</label> </td> <td><label for="surname">{$item.address}</label> </td> </tr> <tr> <td class = "td title" ><label for="surname">Contact Number</label> </td> <td><label for="surname">{$item.cnumber}</label> </td> </tr> <tr> <td class = "td title" ><label for="surname">Contact Person</label> </td> <td class = "td res" ><label for="surname">{$item.cperson}</label> </td> </tr> <tr> <td class = "td title" ><label for="surname">Email</label> </td> <td class = "td res" ><label for="surname">{$item.email}</label> </td> </tr> <tr> <td class = "td title" ><label for="surname">School Center</label> </td> <td class = "td res" ><label for="surname">{$item.school_center}</label> </td> </tr> <tr> <td class = "td title" ><label for="surname">Training Date</label> </td> <td class = "td res" ><label for="surname">{$item.t_date}</label> </td> </tr> <tr> <td class = "td title" ><label for="surname">Certification Date</label> </td> <td class = "td res" ><label for="surname">{$item.c_date}</label> </td> </tr> <tr> <td class = "td title" ><label for="surname">No.Teachers</label> </td> <td class = "td res" ><label for="surname">{$item.no_teacher}</label> </td> </tr> <tr> <td class = "td title" ><label for="surname">Teachers Certified</label> </td> <td class = "td res" ><label for="surname">{$item.cert_teacher}</label> </td> </tr> <tr> <td class = "td title" ><label </form> </div> </div> 

Answer 1

I forgot to mention that you need to link media query print tag in tag

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

I prefer to use external css file

Use media tag in css file:

All your print styles go here inside @media print{...}

@media print {

    .header, .footer, .navigation{

    display: none !important; 

    } 
}

There are some rules, keep in mind that you don't need bunch of things while printing, menus, sidebars etc...

Answer 2

at last I found an answer. I don't know the reason why @media was not working correctly. So I used css styling in the print function itself.

w.document.write('<style>h1{font-size:20px;color:#76C04E;width:90%;}</style>');
w.document.write('<style>body{background: #FFFFFF; color: #000000; font: 85% arial, verdana, helvetica, sans-serif; }</style>');

w.document.write('<style>.res td{font-size: 12px;font-family: open sans, arial; border-top: 1px solid #ddd; width: auto;padding: 4px;} </style>');

Now the css is correctly taken in the print preview page. But it works only in firefox.Will update the answer accordingly when I find the solution for chrome

Thanks.