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
A brief discussion on several advantages of Vue3
Table of contents 1. Source code 1.1 Monorepo 1.2...
Detailed explanation of the pitfalls of DTS caused by the timestamp and datetime time zone issues in MySQL
Table of contents How to represent the current ti...
Summary of seven sorting algorithms implemented in JavaScript (recommended!)
Table of contents Preface Bubble Sort Basic Algor...
Vue achieves seamless carousel effect (marquee)
This article example shares the specific code of ...
How to expand the capacity of VirtualBox's virtual disk vdi file (graphic tutorial)
Find the installation directory of VirtualBox. Th...
What does mysql database do?
MySQL is a relational database management system....
Detailed explanation of new relational database features in MySQL 8.0
Preface The latest version of MySQL 8.0 is 8.0.4 ...
Sending emails in html is easy with Mailto
Recently, I added a click-to-send email function t...
SQL Practice Exercise: Online Mall Database User Information Data Operation
Online shopping mall database-user information da...
Disable autocomplete in html so it doesn't show history
The input box always displays the input history wh...
Detailed explanation of how to quickly operate MySQL database in nodejs environment
GitHub address: https://github.com/dmhsq/dmhsq-my...
Security configuration and detection of SSL after the website enables https
It is standard for websites to enable SSL nowaday...
Implementation code for using CSS text-emphasis to emphasize text
1. Introduction In the past, if you wanted to emp...
Element's el-tree multiple-select tree (checkbox) parent-child node association is not associated
Attribute check-strictly The official document pr...
Meta viewport makes the web page full screen display control on iPhone
In desperation, I suddenly thought, how is the Sin...