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.
Related
I have built a few email templates the issue is that the CSS is not working on yahoo / outlook / windows native app etc. Pretty much anything that is not mac or google.
I did write the templates using tables but for the CSS I used the style tag because I want the templates to also be responsive.
I will leave some code examples below maybe you can point out my mistake.
<style type="text/css" data-hse-inline-css="true">
* {
margin: 0;
padding: 0;
}
body {
background-color: #ebeff5;
font-family: 'Source Sans Pro', sans-serif;
}
table,
tr,
td {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
}
img {
width: 100%;
border: 0;
}
p {
font-size: 20px;
color: #39506f;
line-height: 30px;
}
a {
text-decoration: none;
cursor: pointer;
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #ebeff5;
}
.main {
background-color: #ebeff5;
margin: 0 auto;
width: 100%;
max-width: 750px;
padding: 35px 15px;
}
.spacing-one {
height: 15px;
}
.spacing-two {
height: 25px;
}
.card {
padding: 20px;
background-color: #ffffff;
border-radius: 5px;
}
.main-font {
font-size: 30px;
color: #1b3040;
font-weight: 400;
}
...
<main class="wrapper">
<table class="main">
<tr>
<td class="card">
<table width="100%">
<tr>
<td>
<img
class="logo"
src="path"
alt="logo"
/>
</td>
</tr>
<tr class="spacing-two"></tr>
<tr>
<td>
<h1 class="main-font">Hey {{name}},</h1>
</td>
</tr>
<tr class="spacing-one"></tr>
<tr>
<td>
<p>text.</p>
</td>
</tr>
<tr class="spacing-one"></tr>
<tr>
<td style="height: 56px">
<a href="{{url}}" target="_blank">
<span class="main-button"
>Reset Password
<img
class="main-button-icon"
src="path"
alt=""
/></span>
</a>
</td>
</tr>
<tr class="spacing-one"></tr>
<tr>
<td>
<p>
text.
</p>
</td>
</tr>
</table>
The biggest issue here is that not all email clients support HTML5 semantics (like the <main> tag you're using). And email clients will behave very differently in how they do not support it. You can refer to Can I email for details on support of HTML5 semantics.
For example, Gmail does not support the <main> tag. But it will change it into a <div> element and apply the same class attribute you had in the first place, making this seamless.
Yahoo, however, will remove the <main> element completely, thus also removing the styles you wanted to apply on it.
In your case, changing <main class="wrapper"> into <div class="wrapper"> is enough to make it work in Yahoo.
This might not be enough for Outlook on Windows and Windows native client as both of those use Word as a rendering engine and have very poor support for CSS. Thinks like margin:0 auto or max-width won’t work. You will have to rely on conditional comments, tables and eventually mso specific styles to get a proper rendering for Outlook on Windows.
I am trying to insert code blocks into my blogspot.
Here is the custom CSS i added in the blogger.com for my blog under Advanced - Add CSS section
#scripttable {
border-collapse: collapse;
border-spacing: 0;
width: 100%
border: 1px solid #ddd;
}
#scripthead {
text-align: left;
padding: 8px;
background-color: #FFFFFF;
color: black;
}
#scriptdata {
text-align: left;
padding: 8px;
background-color: #00003F;
color: white;
}
In the html i am using as below
<table id="scripttable">
<tr><th id="scripthead">Heading</th></tr>
<tr>
<td id="scriptdata">
<pre>
This is my code block to be displayed
</pre>
</td>
</tr>
</table>
Now i am able to get code snippet highlighted correctly when viewed on desktop but on mobile devices the table is overflowing the width of blog post.
Here is my blog which when viewed on mobile is not correct. Kindly help me know how i can fix this so that the table adjusts automatically on mobile device
https://novicejava1.blogspot.com/2020/06/how-to-build-and-deploy-python-kivy.html
I was able to fix the issue of table width by updating the html content by wrapping my table in div container with style="overflow-x: auto;".
<div style="overflow-x: auto;">
<table id="scripttable">
<tr><th id="scripthead">Heading</th></tr>
<tr>
<td id="scriptdata">
<pre>
This is my code block to be displayed
</pre>
</td>
</tr>
</table>
</div>
Now the rendering is happening properly on mobile device after this change.
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 designing a responsive email template and i have a slight problem on Outlook Web app.
I found out that it removes classes so there is no point in using media queries so i try to hide a tr element like this :
<tr style="mso-hide:all;
display:none;
height:0;
width:0px;
max-height:0px;
overflow:hidden;
line-height:0px;
float:left;">
But it still shoes up. Any Ideas?
You can add the
<tr style="visibility: hidden"></tr>
However, this only makes it not visible... It is still there and taking up space
Use such class:
.hide {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
Blockquote
I'm not entirely sure way you need a hidden table row, but try this:
<tr style="mso-hide:all;
display:none!important;
height:0;
width:0px;
max-height:0px;
overflow:hidden;
line-height:0px;
float:left;">
This may not work as email clients remove some of the CSS, specially lines that will hide code. It will also remove any links to js or external code. So !important will probably be ignored as well.
Lastly trying to hide content is a huge red flag for spam filters, likely whatever you send with this will end up in the spambox.
We use a combination of tables to hide and show different content. Depending on the size of the image you can adjust the height and width of the td.
Styles:
td.inner { display:none; }
table.promo_1_pic_1 { float: none; width:100%; height:95px; }
table.promo_1_pic_1 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_2_pic_2 { float: none; width:100%; height:95px; }
table.promo_2_pic_2 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_3_pic_3 { float: none; width:100%; height:109px; }
table.promo_3_pic_3 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_4_pic_4 { float: none; width:100%; height:109px; }
table.promo_4_pic_4 td { background: #fff url(test.jpg) no-repeat 0px !important; }
HTML:
<td class="desktop-table" bgcolor="#ffffff" style="padding:20px; background-color:#ffffff; font-family: Arial, Helvetica, sans-serif;">
<!-- promo 1 content -->
<table class="promo_1_pic_1"><tr><td></td></tr></table>
<table class="promo_2_pic_2"><tr><td></td></tr></table>
<table class="promotion">
<tr>
<td class="inner"><img src="test.jpg" alt=""/>
</td>
<td class="inner"><img src="test.jpg" alt=""/>
</td>
</tr>
</table>
</td>
<td class="desktop-table" bgcolor="#ffffff" style="padding:0 10px 10px 10px; background-color:#cfe6f6; font-family:Arial, Helvetica, sans-serif;">
<!-- promo 1 content -->
<h3 style="margin:25px 0px 0px 22px;">You might also be interested in:</h3>
<table class="promo_3_pic_3"><tr><td></td></tr></table>
<table class="promo_4_pic_4"><tr><td></td></tr></table>
<table class="promotion">
<tr>
<td class="inner"><img src="test.jpg">
</td>
<td class="inner"><img src="test.jpg">
</td>
</tr>
</table>
</td>
I had the same problem all day yesterday, I found this question here and seems no correct answer. Then I searched in Litmus community forum. And fortunately saw a comment saying:
Also note with mso-hide:all, that if you are trying to hide content within the table cell that includes nested tables, you must apply this property to any and all nested tables within as well.
So I added mso-hide:all to all child tables, and it worked!
Wrap whatever you need to hide in a div.
div {
width: 0;
height: 0;
overflow: hidden;
}
To keep this question up to date, OWA does accept classes now, and can be targeted by adding [owa] to the start of the class list in css.
[owa] .hide,
.hide {
display: none!important;
mso-hide: all;
width: 0;
min-width: 0;
max-width: 0;
height:0;
min-height: 0;
max-height: 0;
overflow: hidden;
font-size: 0px;
line-height: 0px;
}
With this adding .hide to the element you want to hide, will hide it in all popular email clients, if you want to hide from just outlook (excl OWA), then I'd suggest using conditional code. The following table will be hidden in all email clients. Although it will appear when the email is forwarded from certain email clients.
<!--[if !mso]><!-- -->
<table class="hide">
Hide me
</table>
<!--<![endif]-->
I have a table of data and each cell is a link. I want to allow the user to click anywhere in the table cell and have them follow the link. Sometimes the table cells are more than one line but not always. I use td a {display: block} to get the link to cover most of the cell. When there is one cell in a row that is two lines and the others are only one line the one liners don't fill the entire vertical space of the table row. Here is the sample HTML and you can see it in action here http://www.jsfiddle.net/RXHuE/:
<head>
<style type="text/css">
td {width: 200px}
td a {display: block; height:100%; width:100%;}
td a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
</tbody>
</table>
</body>
Set an arbitrarily large negative margin and equal padding on the block element and overflow hidden on the parent.
td {
overflow: hidden;
}
td a {
display: block;
margin: -10em;
padding: 10em;
}
http://jsfiddle.net/RXHuE/213/
You need a small change in your CSS. Making td height:100%; works for IE 8 and FF 3.6, but it doesn't work for Chrome.
td {
width: 200px;
border: solid 1px green;
height: 100%
}
td a {
display: block;
height:100%;
width:100%;
}
But making height to 50px works for Chrome in addition to IE and FF
td {
width: 200px;
border: solid 1px green;
height: 50px
}
td a {
display: block;
height:100%;
width:100%;
}
Edit:
You have given the solution yourself in another post here; which is to use display: inline-block;.
This works when combined with my solution for Chrome, FF3.6, IE8
td {
width: 200px;
border: solid 1px green;
height: 100%}
td a {
display: inline-block;
height:100%;
width:100%;
}
Update
The following code is working for me in IE8, FF3.6 and chrome.
CSS
td {
width: 200px;
border: solid 1px green;
height: 100%;
}
td a {
display: inline-block;
height:100%;
width:100%;
}
td a:hover {
background-color: yellow;
}
HTML
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
</tbody>
</table>
The example lays here
Little late to the party, but there's a nice solution I just discovered.
You can use a combination of relative and absolute positioned elements, along with a pseudo element to get the effect you're looking for. No extra markup needed!
Change the table cell (<td>), to be position: relative;, and create a ::before or ::after pseudo element on the <a> tag, and set it to position: absolute;, and also use top: 0; left: 0; right: 0; bottom: 0;.
Because the pseudo element is attached to the anchor tag, and you're telling it to take up the entire table cell, it will force the anchor tag to be at least that size, whilst not affecting the actual content of the anchor tag itself (thereby retaining its vertically centered alignment).
For example
table {
border-collapse: collapse;
table-layout: fixed;
}
td {
position: relative;
width: 200px;
padding: 0.5em 1em;
border: 2px solid red;
background-color: lime;
}
td a {
/* FONT STYLES HERE */
text-decoration: none;
}
td a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
<tr>
<td>
Cell 5
</td>
<td>
<a href="http://www.google.com/">Cell 6<br>
second line</a>
</td>
</tr>
</tbody>
</table>
Hope this helps!
Following hack works [Tested on Chrome / Firefox / Safari]
Have the same padding for td and anchor elements. And for anchor also have margin which is equal to -ve of padding value.
HTML
<table>
<tr>
<td><a>Hello</a></td>
</tr>
</table>
CSS:
td {
background-color: yellow;
padding: 10px;
}
a {
cursor:pointer;
display:block;
padding: 10px;
margin: -10px;
}
Working Fiddle :http://jsfiddle.net/JasYz/
Try display: block:
td a {display: block; height:100%;}
[EDIT] WTF ... I can confirm this doesn't work in FF 4 and Chrome. This works:
td a {display: block; height: 2.5em; border: 1px solid red;}
That suggests that height:100%; isn't defined in a table cell. Maybe this is because the cell gets its size from the content (so the content can't say "tell me your size" because that would lead to a loop). It doesn't even work if you set a height for the cells like so:
td {width: 200px; height: 3em; padding: 0px}
Again the code above will fail. So my suggestion is to use a defined height for the links (you can omit the width; that is 100% by default for block elements).
[EDIT2] I've clicked through a hundred examples at http://www.cssplay.co.uk/menus/ but none of them mix single line and multi-line cells. Seems like you hit a blind spot.
I will post the same answer here, as I did on my own question.
Inspired by Jannis M's answer, I did the following:
$(document).ready(function(){
$('table tr').each(function(){
var $row = $(this);
var height = $row.height();
$row.find('a').css('height', height).append(' ');
});
});
I added a since empty links (not containing text nodes) can not be styled(?).
See my updated fiddle.
Only problem here is that using display: block forces the browser to ignore the vertical align: center...
oops.
I jury rigged it to look right for one cell with height:60 and a font that occupied 20 pixels by adding a br... Then I realized that I had some items with 2-line text. Dang.
I ended up using the javascript. The javascript doesn't give the nice mousey pointy clicker thing, but the line of text does, so it will actually trigger a visual response, just not where I want it to... Then the Javascript will catch all the clicks that 'miss' the actual href.
Maybe not the most elegant solution, but it works well enough for now.
Now if I could only figure out how to do this the right way....
Any ideas on how to add the mouse icon change to a hand for the area covered by the onclick? Right now, the click to page works, but the icon only changes when it hits the href which only affects the text.
Why don't you just get rid of the <a> altogheter and add an onClick to the <td> directly?
<head>
<style type="text/css">
td {
text-align:center;
}
td:hover {
cursor:pointer;
color:#F00;
}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td onclick="location.href='http://www.google.com/';">Cell 1<br />second line</td>
<td onclick="location.href='http://www.google.com/';">Cell 2</a></td>
<td onclick="location.href='http://www.google.com/';">Cell 3</td>
<td onclick="location.href='www.google.com';">Cell 4</td>
</tr>
</tbody>
</table>
This way you cut out the middle man.
PS: i know this was asked and answered many years ago, but none of the answers above solved the problem in my case. Hope this helps someone.
For me the only solution is to replace <table> <tr> with <div>s and style them using display:table and display:table-row accordingly.
Then you can replace <td> with just <a> and style it with display:table-cell.
Work perfectly even on varying heights of <td> contents.
so original html without anchors:
<table>
<tr>
<td>content1<br>another_line</td>
<td>content2</td>
</tr>
</table>
now becomes:
a:hover
{
background-color:#ccc;
}
<div style="display:table; width:100%">
<div style="display:table-row">
content1<br>another_line
content2
</div>
</div>
I have used this solution: works better then the rest in my case.
CSS:
.blocktd {width: 100%; height: 100%; padding: 0px; overflow: hidden}
a.blocktd {margin: 0em; padding: 50px 20px 50px 20px; display: block;}
a.blocktd:hover {border: 4px solid #70AEE8; border-radius: 10px; padding: 46px 16px 46px 16px; transition: 0.2s;}
And in HTML: ...