I Have Problem with Headers And Footer on web page Which is Going to Print. My custom headers and footer should print on each page. Header is printing at top of page, that is fine, but footer is not printing at bottom of page if the content is less on page. footer is printing depends on content.
HERE MY CODE IS:-
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<link rel='stylesheet' type='text/css' href='print.css' media='print'>
<title></title>
</head>
<body>
<table border="0" align="center" width="100%">
<thead>
<tr>
<th align="center" width="100%">
<font size="5" color="black"><strong>HEADER HERE</strong></font>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td align="center" width="100%">
<font size="4" color="black"><strong>FOOTER HERE</strong></font>
</td>
</tr>
</tfoot>
<tbody height="100%">
<tr>
<td width="100%">
CONTENT HERE
</td>
</tr>
</tbody>
</table>
</body>
</html>
MY CSS IS:-
.thead {
display: table-header-group;
}
.tfoot {
display: table-footer-group;
}
Can any one suggest me how to do it ? that would great help?
Since you have a print.css, write (only in print.css):
thead {
display: block;
position: fixed;
top: 0;
}
tfoot {
display: block;
position: fixed;
bottom: 0;
}
Depending on how much height your thead and tfoot might occupy, use an appropriate margin-top and margin-bottom on the table to avoid any overlap that might occur.
This is the code i use. Note I am setting both html and body height to 100% (needed for Chrome and Safari). Tested and works fine in IE9, FF, Chrome.
#media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
Related
I am trying to remove the header from only the first page while printing,
or Saving it to PDF
but it's not working
I have tried the below CSS codes but none of theme are working:
I have also visited these link but but none of the answer worked for me
Remove Header from First Page of HTML Generated PDF - CSS
and Delete the footer only on the last page using CSS
#page: first {
#top-left {
content: normal;
}
}
#page :not(:first) {
}
Both of theme didn't worked.
my styles
<style type="text/css">
.page-header,
.page-header-space {
height: 100px;
}
.page-footer,
.page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black;
/* for demo */
background: white;
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black;
/* for demo */
background: white;
/* for demo */
}
.page {
page-break-after: always;
}
#page {
margin: 10mm;
}
#media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
body {
margin: 0;
}
#page: first {
#top-left {
content: normal;
}
}
.main_paragraph {
white-space: pre-line;
white-space: pre-wrap;
line-height: 25px;
font-size: 16px;
margin-right: 10px;
margin-left: 10px;
text-indent: 30px;
text-align: justify
}
</style>
my Body
<body>
<div class="page-header" style="text-align: center">
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div>
<img src="{{URL::asset("img/logo.jpg")}}" style="width: 90%;display: block;margin: 0 auto;z-index: 1;">
</div>
<table id="main_table" dir="rtl"
style="width: 95%;text-align:center; margin: 0 auto;border-collapse: collapse;" border="1">
<tbody>
<tr style="font-size: 18px;font-weight:bold;height:40px">
<td style="width: 47.5%">sugestion</td>
<td style="width: 7%">date</td>
<td style="width: 46.5%">order</td>
</tr>
<tr>
<td style="border-bottom: hidden;text-align:right">
<p style="text-align: right;font-size: 19px;margin-right:30px;font-weight:bold">
{{$result[0]->name}}</p>
</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
{{-- <td>{{strlen($result[0]->document_text)}}
</td> --}}
#if(strlen($result[0]->document_text)<=977) <td style="vertical-align: top;border-top:hidden;height:65vh"
dir="rtl">
#else
<td style="vertical-align: top;border-top:hidden;" dir="rtl">
#endif
{{$result[0]->document_text}}
<p class="main_paragraph" dir="rtl" lang="ar">{{$result[0]->document_text}}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<div class="page-footer" style="text-align: center;width:94.5%;margin-left:2.55%">
</div>
</body>
I'm testing it on chrome.
You can use media query in CSS to fix that
media query is used to hide an element when printing web pages. Use #media print query and set the display none or visibility hidden to that element that needs to hide at printing
like this
#media print{
.page-header{
display:none;
}
}
if this doesn't work with you try to add media = print link on an HTML page
like this
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
If still doesn't work try to add CSS code to the HTML page
Like This
<style>
#media print{
.page-header{
display:none;
}
}
</style>
try to do it with Laravel
<div class="header
#if(Route::currentRouteName() === 'yourPage')
{{hied-in-print}}
#endif "></div>
and use this class hied-in-print in #media print
<style>
#media print{
.hied-in-print{
display:none;
}
}
</style>
I try to use counter(page) inside my HTML report but without success.
I read many StackOverflow pages about this topics but I never found working solution !
Environment
Chrome (latest version: 70.0.3538.110)
Firefox (latest version: 63.0.3)
Workflow
Copy the code into HTML page
Open it with Chrome/Firefox
Print it
Inside preview, number is not properly computed
Questions ?
Do you have solution about this topics (if possible just with HTML/CSS) ?
Current CSS3 standard is not supported by the major browsers in 2018 ?
Maybe thead / pageBreak combo is not perfectly supported ?
Thanks !
PS: Please publish entire solution (not a partial HTML/CSS code) !
My HTML demo
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>HTML CSS Page counter</title>
<style>
table.report-container {
page-break-after:always;
}
thead.report-header {
display:table-header-group;
}
tfoot.report-footer {
display:table-footer-group;
}
#media print{
#page {
size: A4 portrait;
}
.pageBreak {
page-break-before: always;
}
span.page-number:after {
content: "Page " counter(page);
}
}
#media screen{
span.page-number:after {
content: "All pages";
}
}
</style>
</head>
<body>
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
<div class="header-info">
<table border="1" width="100%">
<tr height="100px">
<td align="center" valign="middle">Header title</td>
<td><span class="page-number"></td>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tfoot class="report-footer">
<tr>
<td class="report-footer-cell">
<div class="footer-info">
<table border="1" width="100%">
<tr height="50px">
<td><p>Other info</p></td>
</tr>
</table>
</div>
</td>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">
First page with some data.
<div class="pageBreak"></div>
Second page with some data.
<div class="pageBreak"></div>
Third page with some data.
<div class="pageBreak"></div>
Fourth page with some data.
<div class="pageBreak"></div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Not all browsers support content:counter(page); So far the only one I've found that does is Firefox. But it doesn't work with your code example because you're using tables. Specifically, page-break-before does not (is not supposed to) work within a table. Chrome lets you, but Firefox doesn't.
For demonstration purposes I've tried to recreate your table in css and paginate the results.
You'll need to copy the results into a new .html file to test.
body {
width: 300px;
}
#header {
border: 1px solid;
overflow: hidden;
}
#header>div {
float: left;
width: 50%;
line-height: 100px;
text-align: center;
}
#foot {
border: 1px solid;
}
#header p {
margin: 0;
}
#header #page-number {
border-left: 1px solid;
width: calc(50% - 1px);
}
#page-number:after {
content: "All pages";
}
#media print {
.pageBreak {
page-break-before: always;
padding-bottom: 120px;
}
#content {
padding-top: 120px;
}
#header {
display: block;
position: fixed;
top: 0pt;
left: 0pt;
right: 0pt;
}
#page-number:after {
content: "Page " counter(page);
counter-increment: page;
}
#foot {
display: block;
position: fixed;
bottom: 0pt;
}
}
<div id="header">
<div id="header-title">
<p>Header title</p>
</div>
<div id="page-number"></div>
</div>
<div id="content">
First page with some data.
<div class="pageBreak"></div>
Second page with some data.
<div class="pageBreak"></div>
Third page with some data.
<div class="pageBreak"></div>
Fourth page with some data.
<div class="pageBreak"></div>
</div>
<div id="foot">
Other info.
</div>
I am trying to find a way to make a cell transparent or semi-transparent. The below code should work but doesn't:
<html>
<style>
op {
opacity:0.3;
filter:alpha(opacity:30)
}
</style>
<body background="background.jpg" style="background: black;">
<table border="1" width="100%" height="222">
<tr>
<td class="op" bgcolor="#FFFFFF" height="216"> </td>
</tr>
</table>
</body></html>
You haven't properly defined the CSS class, class definition must begin with a dot, in your case .op.
Also, your are mixing CSS and HTML attributes, you should only only CSS (note that definitions for HTML tags don't start with a dot):
<html>
<style>
body {
background-image: background.jpg;
background-color: black; /* for testing without the image*/
}
table {
border: 1px;
width: 100%;
height: 222px;
}
td {
height: 216px;
}
.op {
opacity:0.3;
filter:alpha(opacity:30);
background-color: #FFFFFF;
}
</style>
<body>
<table>
<tr>
<td class="op"> </td>
</tr>
</table>
</body></html>
I have web application performing report printing.
my code look like this & it works properly.
HTML
<table>
<thead>
<tr>
<th>
Header part
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="reportView">
<div class="head centerPosition noPrint">
Report header
</div>
<div class="content" style="margin: 0px;">
<div id="report" style="margin-top: 10px;">
report content
</div>
</div>
<div class="foot noPrint">
Report footer
</div>
</div>
</td>
</tr>
</tbody>
</table>
CSS
<style media="print">
body
{
background-color:#FFFFFF;
margin: 0px; /* this affects the margin on the content before sending to printer */
width: 100%;
}
#site_header, #site_footer, .noPrint
{
visibility: hidden;
display: none;
height: 0px !important;
overflow: hidden !important;
}
#report .content
{
width: 100%; margin: 0px; float: none;
background: transparent;
}
#report {
background-color: white;
width: 100%;
}
</style>
After I print any report, the report is scale down on paper.
If anyone have an idea how to fix this please help me. I have try to search on google but none of the suggestion are work.
Thanks in Advance...
My guess (because I can't test right now) is that you also need to declare width:100% on each of the containers above #report .content (from the HTML you've provided, it looks like #reportView and the table and td that contains it all, but there may be more). Otherwise it will collapse to it's content width, which is the default behavior of a table cell.
I have the following code:
<!DOCTYPE html>
<html>
<head>
<style>
.tl, .tr, .bl, .br, .b, .t {
background: #f00;
width: 16px;
height: 16px;
}
.m {
background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0;
}
table {
width: 512px;
height: 512px;
border-spacing: 0px;
border-collapse: collapse;
table-layout: fixed;
}
</style>
</head>
<body>
<table>
<tr>
<td class="tl"> </td>
<td class="t"> </td>
<td class="tr"> </td>
</tr>
<tr>
<td> </td>
<td class="m">test</td>
<td> </td>
</tr>
<tr>
<td class="bl"> </td>
<td class="b"> </td>
<td class="br"> </td>
</tr>
</table>
</body>
</html>
It works fine as long as I don't look at it with IE7. IE7 for some reason does not respect my width and height set to 16px and instead makes all rows and columns to take the average size. Oddly, this works in the Quirks mode though, but now in the standards mode, what's up?
P.S. Is there any other way of accomplishing a similar layout that has 16x16 corners, 16px top and bottom while the middle fits in?
give height:100%; for .m
Try giving each cell some content:
<td class="tl"> </td>
that should fix it.
border-spacing and border-collapse are not supported in IE7 and below. Try using
<table cellspacing="0" cellpadding="0">
Update:
I don't have IE7 nor IE6 here, so this is just a guess: try setting the width and height of .m to auto. If that doesn't work (since that would be too easy, right? :)), you can set the dimensions manually to 480px (512 - 2 * 16)
Try this:
<style>
table {
width: 512px;
border-spacing: 0px;
border-collapse: collapse;
table-layout: fixed;
}
table .m
{
background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0;
height: 512px;
}
.tl, .tr, .bl, .br, .b, .t {
background: #f00;
width: 16px;
height: 16px;
}
</style>