Web page printing thin line table + page printing ultimate strategy
|
When I was printing for a client recently, he asked me not to print the header of the page, but only the contents of the table, because the header has a background and a print button, and it needs to be a thin-line table. I think it is very simple. If you still don’t know how to make a thin-line table, please see the following code to achieve the effect:) <table cellSpacing=0 cellPadding=0 border=0> <tr> <td bgcolor='black'> <table cellSpacing=1 cellPadding=1 border=0> <tr align=center bgcolor='#ffffff'> <td colspan=2>National level</td><td colspan=1>Municipal level</td> </tr> <tr bgcolor='#ffffff' align=center> <td>People's Daily</td> <td>Liberation Daily</td> <td>Xinmin Evening News</td> </tr> </table> </td> </tr> </table> Then I set IE to print background. I thought it was done, but when I printed and previewed, there was a big black block in the header. Why? Because there was a background in the header, and it took up the page! .gTitle { width:100%; height:32px; line-height:32px; background-image:url(images/gtitle.gif); padding-left:130px; margin-bottom:10px; } I started to feel depressed. I searched the Internet for a long time but couldn't find a perfect solution, so I decided to do it myself. After thinking about it for a long time, I finally figured it out:) The Css definition is as follows: noneprint: Style definition hidden when printing tabPrint: Thin line table style definition to be printed nextPate: Pagination style definition linetd: Haha, this is the most important thing, to make your form print perfectly Copy code The code is as follows:@media print { .noneprint{display:none;} } .tabPrint td { border-left:#000000 solid 1px; border-top:#000000 solid 1px; height:21px; } table.tabPrint { border-right:#000000 solid 1px; border-bottom:#000000 solid 1px; } .nextPage { page-break-after:always; } .linetd { border-bottom:solid 1px #000; } The page HTML is as follows: Remember to add style="display:table-header-group;font-weight:bold" to thead, so that each page will have a header. <div class="noneprint"> <div class="gTitle">>><A href="../Default.aspx" mce_href="Default.aspx">Home</A>>><A href="Default.aspx" mce_href="Default.aspx">Portal</A>>>Information Management</div> <table cellSpacing="0" cellPadding="2" width="100%" align="center" border="0" ID="Table1"> <tr> Title: <td><input name="txtFName" type="text" id="txtFName" style="width:150px;" /></td> <td align="right">Street:</td> <td><select name="ddlStreet" id="ddlStreet"> <option selected="selected" value="">-Please select the status-</option> </select></td> <td align="right">Entry date:</td> <td colSpan="3"><input name="sDate" type="text" id="sDate" onclick="setday(this)" style="width:80px;" />-- <input name="eDate" type="text" id="eDate" onclick="setday(this)" style="width:80px;" /></td> <td><input type="submit" name="btnSearch" value="Query" id="btnSearch" class="Button" /> <input type="button" onclick="window.print()" value="Print" class="Button" ID="Button1" NAME="Button1"></td> </tr> </table> </div> <table class='tabPrint' align="center" width="95%" cellSpacing="0" cellPadding="0" border="0" ID="Table2"> <thead style="display:table-header-group;font-weight:bold" mce_style="display:table-header-group;font-weight:bold"> <tr align="center"> <td rowspan="2">Street</td> <td rowspan="2">Title</td> <td rowspan="2">Entry Date</td> <td colspan="2">National</td> <td colspan="1">Municipal level</td> </tr> <tr align="center"> <td>People's Daily</td> <td>Liberation Daily</td> <td>Xinmin Evening News</td> </tr> </thead><tbody> <tr align="center"> <td>Pudong New Area Pusan Street</td> <td>Test</td> <td>02-24-2009</td> <td>√</td> <td>√</td> <td>√</td> </tr> <tr align="center"> <td>Pudong New Area Pusan Street</td> <td>sseref</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>Pudong New Area Pusan Street</td> <td>sseref</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center" class='nextPage'> <td colspan="6" class='linetd'>Page 1</td> </tr> <tr align="center"> <td>Pudong New Area Pusan Street</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>Pudong New Area Pusan Street</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>Pudong New Area Pusan Street</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>Pudong New Area Pusan Street</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> <tr align="center"> <td>Pudong New Area Pusan Street</td> <td>sdsedjiik</td> <td>02-24-2009</td> <td> </td> <td> </td> <td> </td> </tr> </tbody></table> Haha, you have to look carefully at the areas marked in red, perfection depends entirely on them! |
<<: 4 ways to avoid duplicate insertion of data in Mysql
>>: CSS Problems with Using Position:fixed and Margin-top Together on Same-Level Elements
Recommend
Teach you how to build a react+antd project from scratch
The previous articles were all my own learning lo...
Nest.js authorization verification method example
Table of contents 0x0 Introduction 0x1 RBAC Imple...
css input[type=file] style beautification (input upload file style)
Effect: <!doctype html> <html> <he...
Element uses scripts to automatically build new components
Table of contents background How does element-ui&...
Detailed tutorial on compiling and installing MySQL 5.7.24 on CentOS7
Table of contents Install Dependencies Install bo...
The difference between Input's size and maxlength attributes
I recently used the input size and maxlength attri...
How to build your own Nexus private server in Linux
This article describes how to build a Nexus priva...
How to install JDK and set environment variables in Linux (this article is enough)
Table of contents 1. Check the number of Linux bi...
MySQL 5.7.18 zip version installation and configuration method graphic tutorial (win7)
The installation of mysql5.7.18zip version on Win...
How to make a tar file of wsl through Docker
I've been playing with the remote development...
Instructions for nested use of MySQL ifnull
Nested use of MySQL ifnull I searched online to s...
Tutorial on installing MySQL database and using Navicat for MySQL
MySQL is a relational database management system ...
Query process and optimization method of (JOIN/ORDER BY) statement in MySQL
The EXPLAIN statement is introduced in MySQL quer...
Universal solution for MySQL failure to start under Windows system
MySQL startup error Before installing MySQL on Wi...
Vue integrates a rich text editor that supports image zooming and dragging
need: According to business requirements, it is n...