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>
Related
I would like to create some text like this.
I used this code, but it didn't work:
woman <span style="padding-left:40px"> TextTextTextText</span> <br>
Man <span style="padding-left:40px"> TextTextTextText</span>
What should I use instead?
<style>
table {
border: 0;
border-collapse: collapse;
}
.pl-40 {
padding-left: 40px;
}
</style>
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>Woman</td>
<td class="pl-40">TextTextTextText</td>
</tr>
<tr>
<td>Man</td>
<td class="pl-40">TextTextTextText</td>
</tr>
</table>
</body>
</html>
You might want to use a table:
.left {
text-align: left;
}
.right {
text-align: right;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<tbody>
<tr>
<td class="left">Woman</td>
<td class="right">TextTextTextTop</td>
</tr>
<tr>
<td class="left">Man</td>
<td class="right">TextTextTextBottom</td>
</tr>
</tbody>
</table>
</body>
</html>
If you want some more space between them, then you can add padding-right: 40px; to the .left declaration in the CSS:
.left {
text-align: left;
padding-right: 40px;
}
As Prem Signh said in his answer, you can hide the border with <table style="border: 0; border-collapse: collapse;"> instead of <table>.
Try using something like this:
.left {
display: inline-block;
width: 50px;
}
.right {
padding-left: 40px;
}
<div>
<span class="left">woman</span>
<span class="right">TextTextTextText</span>
</div>
<div>
<span class="left">Man</span>
<span class="right">TextTextTextText</span>
</div>
I'm trying to create a new HTML signature for our company, but I can't seem to get it work nicely on Gmaill app (Android in my test case). Both font-size and line-height changes. I tried different stuff, even deleted the whole HTML signature and try to make a new one with just a few lines to test, but unfortunately I can't get it to work. I tried so many things, that I just have no clue anymore how to fix. I also tried to search for the problem, but I still can't seem to make it work. Please see attached code.
If anyone can help me into the right direction, that would be great. I also included screenshots to show what I mean regarding the Gmail app. As you can see, also text-size is different.
https://imgur.com/mxtU4Bs
https://imgur.com/RXKQt9w
Thanks in advance!
<html>
<head>
<meta charset="utf-8">
<title>html signature</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {margin: 0px; padding: 0px; }
img { border: 0px; }
a { color: #00002E; text-decoration: none; }
h1.title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-top: 0px; margin-bottom: 5px; }
span.function { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
#wrapper { width: 100%; max-width: 470px; }
#border { border-left: 1px solid #00002E; }
table.functiondetails { width: 100%; margin-top: 5px; }
table.functiondetails tr { height: 30px; }
table.functiondetails tr td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
table.functiondetails tr td.icon { width: 10%; }
table.functiondetails tr td.detail { width: 90%; }
#media screen and (max-width: 768px) {
#wrapper { width: 90%; }
#logoColumn { width: 30%; max-width: 30%; }
#logoColumn img { width: 100%; }
#functionColumn { width: 70%; max-width: 70%; }
}
#media screen and (max-width: 470px) {
#wrapper{ width: 100%; }
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="wrapper" cellpadding="0" cellspacing="0">
<tr>
<td id="logoColumn">
logo
</td>
<td id="border"></td>
<td id="functionColumn">
<h1 class="title">Name of employee</h1>
<span class="function">Function | Company</span>
<table class="functiondetails" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-phone.jpg" alt="Bel ons" width="13" height="13"></td>
<td class="detail">+31 (0)6 - 12345678<br>+31 (0)162 -123456</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-email.jpg" alt="Mail ons" width="13" height="13"></td>
<td class="detail">email#domain.nl</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-location.jpg" alt="Adresgegevens" width="13" height="13"></td>
<td class="detail">Address line 1<br>Address line 2</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-arrow.jpg" alt="Website" width="13" height="13"></td>
<td class="detail">domain.nl</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[1]: https://imgur.com/mxtU4Bs
Campaign Monitor can tell you a lot of information about what CSS properties are supported by the different email platforms. On there it mentions that font-size and line-height are almost universally supported. But it says that style tags in the head or body are not entirely supported, and there is very low support for linked CSS. So your best bet is to try inline styles.
https://www.campaignmonitor.com/css/text-fonts/line-height/
One downside of only using inline styles however is that you can't use media queries. So you could still leave the media queries in a style tag, but they just won't be used by every platform.
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 need help with a responsive table. What's needed is to basically have it change to a 'mobile version' upon resizing, however the mobile version is a little different to the main style of it, as the image shows.
I've currently got this: http://jsfiddle.net/MLsZ8/
HTML:
<table class="crafting">
<thead>
<tr>
<th style="width:15%">Name</th>
<th style="width:20%">Ingredients</th>
<th style="width:205px;">Input > Output</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ore Blocks</td>
<td>Gold Ingots, Iron Ingots, Diamonds and Lapis Lazuli Dye</td>
<td><img width="204" height="112" title="Crafting Ore Blocks" src="http://www.minecraftxl.com/images/crafting/Crafting-Ore-Blocks1.gif" alt="Crafting Ore Blocs from Ingots" /></td>
<td>Turn ingots or diamonds into a placeable block. Can be used for storage or to show off.</td>
</tr>
</tbody>
</table>
CSS:
td {
border:0;
}
table.crafting {
border-spacing:0;
border-collapse:collapse;
}
.crafting th {
border:2px solid #f3f3f3;
padding:5px;
}
.crafting td {
border:2px solid #f3f3f3;
padding:5px;
vertical-align:top;
}
.crafting tr {
background:#c6c6c6;
}
.crafting-name {
font-weight:bold;
border-bottom:0 !important;
background:#c6c6c6;
}
.crafting-ingredients {
border-top:0 !important;
border-bottom:0 !important;
background:#bcbcbc;
}
.crafting-img {
width:205px;
border-bottom:0 !important;
border-top:0 !important;
background:#c6c6c6;
}
.crafting-desc {
border-top:0 !important;
background:#bcbcbc;
}
If you are not opposed to changing the overall format of the HTML, I have a solution that might be a bit easier to handle...
If you change the current table structure to a series of div elements, you can nest each table row into a container div.
I'll give you an example for one "row":
<div class="tableRow">
<div class="columnOne"> content </div>
<div class="columnTwo"> content </div>
<div class="columnThree"> content </div>
<div class="columnFour"> content </div>
</div>
Then, using CSS, you could set .tableRow {width: 100%}. From here, you could set the column widths based on your needs. From your example, it looks like you could do:
.columnOne {width: 10%; float: left;}
.columnTwo {width: 15%; float: left;}
.columnThree {width: 30%; float: left;}
.columnFour {width: 45%; float: left;}
Then, when you reach your mobile view breakpoint, using a #media query, you can do the following:
.columnOne, .columnTwo, .columnThree, .columnFour {width: 100%}
This will cause the columns to effectively become rows of width: 100%.
Option 1:
Full tables
http://jsfiddle.net/2655u/
Option 2
Convert tables to div in used mediaqueries
HTML
<div class="title">
<div class="name">Name</div>
<div class="ingredients">Ingredients</div>
<div class="field">Input > Output</div>
<div class="description">Description</div>
</div>
<div class="responsive">
<div class="name">Ore Blocks</div>
<div class="ingredients">Gold Ingots, Iron Ingots, Diamonds and Lapis Lazuli Dye</div>
<div class="field">
<img width="204" height="112" title="Crafting Ore Blocks" src="http://www.minecraftxl.com/images/crafting/Crafting-Ore-Blocks1.gif" alt="Crafting Ore Blocs from Ingots" />
</div>
<div class="description">Turn ingots or diamonds into a placeable block. Can be used for storage or to show off.</div>
</div>
CSS
div {
display: table;
width: 100%;
table-layout: fixed;
}
div > div {
display: table-cell;
background : #C6C6C6;
border:2px solid #f3f3f3;
padding:5px;
vertical-align : top;
}
div.title {
text-align : center;
font-weight:bold;
}
div.name {
width : 90px;
}
div.ingredients {
width : 150px;
}
div.field {
width : 205px;
}
#media only screen and (max-width: 767px) {
.title {display:none;}
.responsive div {
display : block;
width : auto;
text-align : center;
background : white;
}
.responsive div.ingredients {background : #C6C6C6;}
.responsive div.description {background : #C6C6C6;}
}
Example: http://jsfiddle.net/2DTSG/
Well, I was also searching for the same one day. Got the following. It follows the same approach, converting columns to rows when getting viewed in smaller device.
http://css-tricks.com/responsive-data-tables/
Before moving ahead see the Live Demo
One simple solution is to have two tables: a regular table (with class full) and a mobile one (with class mobile). Then you can use a media query to switch between them at a particular screen size.
If your website isn't particularly heavy, this is an approach that will save a lot of headache.
Example fiddle: http://jsfiddle.net/QDrPb/
.mobile {
display:none;
}
#media (max-width:767px) {
.full {
display:none;
}
.mobile {
display:block;
}
}
Twitter Bootstrap is a nice thing to achieve table-responsiveness.
http://getbootstrap.com/
You have to download it from the above link and add the css file.
After that, apply like this: http://getbootstrap.com/css/#tables-responsive
I hope this may help your need.
Thanks
here simple demo please reffer this link for pure css demo fiddle
/*by Ñ££¿ Upadhyay*/
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;a
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 18px;
margin: 10px;
}
table tr {
background: #f8f8f8;
border: 1px solid #ddd;
padding: 10px;
}
table th,
table td {
padding: 10px;
text-align: center;
}
table th {
font-size: 14px;
letter-spacing: 0;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 14px;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: 5px;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: 14px;
text-align: right;
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
padding-right: 70px;
}
table td:last-child {
border-bottom: 0;
}
}
<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
<th scope="col">Period</th>
<th scope="col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Acount">Visa - 3412</td>
<td data-label="Due Date">02/01/2016</td>
<td data-label="Amount">$842</td>
<td data-label="Period">01/01/2016 - 01/31/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
</tbody>
</table>
Responsive Tables JavaScript Plugin
<link rel="stylesheet" href=".../dist/css/table-fluid.css"/>
<script src=".../dist/js/table-fluid.js"></script>
<table class="table-fluid">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Use JavaScript function
window.tableFluid('.table-fluid');
https://www.npmjs.com/package/table-fluid
https://github.com/maestro888/table-fluid
Table cells cannot rearrange they way you want - rows and columns are locked and cannot float. All you can do is change the layout WITHIN each cell. You will need to change your mark-up completely to make that happen.