My HTML email format is not functioning properly in outlook. The code is using angular and bootstrap css. I have used inline css specially for outlook but when i see the email in outlook table is stretched in full screen.
I have seen some question and used the implementation suggested in answers but still showing this problem. my code is as follow:
<table class="table table-striped table-bordered table-condensed" width="320" style="margin-bottom: 20px;border: 1px solid #ddd; border-collapse: collapse">
<tr ng-repeat="x in xall | orderBy:'name':false" style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px;">
<th style="text-align: left; padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:40%;">Site Revenue</th>
<td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="!data.isPrev">£850</td>
<td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="data.isPrev">£500</td>
</tr>
<tr ng-repeat="x in xall | orderBy:'name':false" style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px;">
<th style="text-align: left; padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:40%;">Product Revenue</th>
<td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="!data.isPrev">£650</td>
<td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="data.isPrev">£570</td>
</tr>
</table>
Please put some suggestions as I am totally stuck with this issue as width attribute is not functioning with outlook.
I had the same problems.
Here are some hints:
when you give padding attribute, it should go like this: padding:5px 5px 5px 5px;
floating (float) CSS attribute is not working in outlook.
when you give background color which need to be given as ( bgcolor ) in table attribute.
Write all CSS attributes inline
The fact is that Outlook uses Word for rendering your HTML. Word is used as an email editor. Read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following series of articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Hope you will find that information helpful...
Related
This question already has answers here:
Giving a border to an HTML table row, <tr>
(10 answers)
Closed 2 years ago.
Any thoughts as to why this isn't working?
<tr style="border-style: solid; border-width: 0px 0px 3px 0px; border-color: #97298f;">
Thanks!
EDIT:
This is more detail from this section, applying to cells since it wasn't working for the row, using the suggestions below – but it's still not working:
<tr>
<td style="border: 0px 0px 3px 0px solid #97298f" width="75%" colspan="3"><p><i><span style="font-size:42pt;font-family:"Fira Sans Medium",sans-serif; color:#7030A0">Joining Together</span></i></p></td>
<td style="border: 0px 0px 3px 0px solid #97298f" width="25%"><p align="right" style="text-align:right"><span style="font-family:"Fira Sans Light",sans-serif;"><img width=112 height=62 src="https://drive.google.com/uc?export=view&id=1ZVLVDqtRqX691OXo7dN2n1Pb2V1D42Lq&authuser=camfont%40gmail.com&usp=drive_fs"
alt="Unity Logo" v:shapes="Picture_x0020_4"></span></p></td>
</tr>
The properties of the border attribute are in the following order:
border-width, border-style and then the color.
Take a look at this example
<tr style="border: 1px solid red;">
You can open this site to know more abbout styling tables.
I am trying to format the table to have rows separated by lines.Even tried using inline styles but nothing worked. Am I missing anything here?
Expected output :
Output I am getting :
Here is the perl code that I am using to generate the HTML for the email :
my $section_html = '';
$section_html.=qq(<table><tr style="border : 1px solid black;"><td>Hello1</td><td>Hello2</td></tr><tr style="border : 1px solid black;"><td>Hello3</td><td>Hello4</td></tr></table>);
my $email_html = <<EOF;
<html><head><style type="text/css">
body, td, th, strong { font-family: Verdana; font-size: 11px; }
table {
border:none;
border-collapse: collapse;
text-align:center;
}
table td {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
table th {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
table td:first-child {
border-left: none;
text-align:left;
}
table td:last-child {
border-right: none;
}
table tr{
border-top : 1px solid #000;
}
table tr{
border-top : 1px solid black;
}
</style></head>
<body bgcolor="#ffffff">
<span style="font-size: 20px">Report Header</span>$section_html</body></html>
EOF
# Write to file
open(FILE, ">/var/weekly_report/"."report"."_"."testing".".html") or die "Unable to open file for writing: $!\n";
print FILE $email_html;
close(FILE);
# Email weekly report
my $msg = MIME::Lite->new(
To => 'XXXX#somedomain.com',
Subject => 'Report subject',
Type => 'text/html',
Data => $email_html);
$msg->send();
This is going old school. Try this method as well. The difference from Ted's answer is, you have the whole table the same color and in his answer you can choose the border color for different td's or th's.
<table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="#000000">
<tbody>
<tr>
<td width="50%" bgcolor="#ffffff">Hello1</td>
<td width="50%" bgcolor="#ffffff">Hello1</td>
</tr>
<tr>
<td bgcolor="#ffffff">Hello1</td>
<td bgcolor="#ffffff">Hello1</td>
</tr>
</tbody>
</table>
Some email clients (and maybe browsers) don't allow us to directly style the <tr> tag. It's also safer to avoid relying on :first-child and :last-child pseudo selectors, as they are not well supported in email.
However you we can achieve your desired effect by styling the <table> and <td> tags:
table {
border-top: 1px solid #000;
border-right: 1px solid #000;
}
table td,
table th {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
You can also have absolute control by inlining all CSS, which is still a good idea in HTML email.
My question is how to create a box on extreme side of the page in ckeditor
This is the code what is used but unable to generate the same in word.
<table border="4" cellpadding="1" cellspacing="1" style="height:5in; margin-left:5in; margin-right:5in; margin-top:-0.7in; width:100px">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
Alternately,i used div property but i couldn't get what i wanted
<div style="border-bottom: #000 1px solid; text-align: center; border-left: #000 1px solid; height: 36px; margin-left: 50px; border-top: #000 1px solid; margin-right: 50px; border-right: #000 1px solid">AGREEMENT FOR HYPOTHECATION-AGRICULTURAL ADVANCES</div>
Can anyone help me out like what is the exact thing to be done to position a box on left side of page and simultaneously can alter the text box size?
Thanks in Advance
I was creating a table, but my issue is that table border is not working because it calls some other css.
Here is my FIDDLE
margin: 0;
padding: 0;
border: 0;
So how can i override the margin: 0;padding: 0; border: 0; , so that i can get the table border easily.
Any help is appreciated.
It's not about the margin nor padding, it's the border: 0 that hides the border.
Add a rule for the table tds such as:
td {
border: 1px solid black;
}
to show td borders. The same applies to table tag. You would also probably want to take a look at the border-collapse property for table tag (https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse).
Demo: http://jsfiddle.net/2DQ6U/10/
Furthermore, I suggest you to avoid any inline style definition if not strictly necessary.
Remove border:0 from CSS.
Take a look here:
DEMO
It is better you can use class for the table and apply it through CSS.
HTML
<table class="testclass">
<tbody>
<tr>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>ID Number</strong></span></span></td>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>Room Name</strong></span></span></td>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>Name of Company</strong></span></span></td>
</tr>
<tr>
<td>
<span style="color:#000000;"><strong><span style="font-family:verdana,geneva,sans-serif;">1</span></strong></span></td>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;">Premier</span></span></td>
<td>
Amsh Ltd</td>
</tr>
</tbody>
</table>
CSS
table.testclass
{
border-top:1px solid #000;
border-left:1px solid #000;
border-collapse:collapse;
width:800px;
}
table.testclass td
{
border-right:1px solid #000;
border-bottom:1px solid #000;
padding:5px;
}
FIDDLE DEMO
the reason your border doesnt work is because you are using "border-collapse: collapse" on the tbody. You need to instead use it on table styling.
here is the CSS you need to use
table,td{
border: 1px solid black;
padding: 5px;
margin: 1px;
}
Here is the HTML change. Notice the "border-collapse:collapse" in the table but not tbody which was your problem.
<table border="10" cellpadding="10" cellspacing="10" style="width: 800px;border-collapse: collapse;">
<tbody style="border: 1px solid black; ">
Here is the fiddle
Hope that helps.
I'm working on a mobile site targeting older phones that have limited CSS \ html support and so I'm reverting to tables.
What I'm trying to achieve on a particular page is to have a table row with a heading of a particular value and then another row in the same table with the value and a link to edit
The problem is that the heading spans only one column and I would like to be able to style it so that there is some padding and margins as well as a border.
Can someone provide some advice on how to do this?
HTML
<div class="navalt">
<table style="width:100%;">
<tbody>
<tr class="edHeading">
<td><fmt:message key="editprofile.location"/></fmt:message></td>
</tr>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
CSS
.navalt {
text-align:center;
padding: 4px 0px 4px 4px;
border-top: thin solid #C5C9D1;
border- bottom: thin solid #C5C9D1;
}
.edHeading {
padding: 4px 0px 4px 4px;
background-color:#E9E1FF;
}
.leftTd {
border-right: thin solid #C5C9D1;
padding: 0px 0px 0px 5px;
text-align:left;
width:50%;
}
.rightTd {
padding: 0px 5px 0px 0px;
text-align:right;
width:50%;
}
As Wabs said, you could just add a colspan to your td in the heading.
Another way, which will allow you to separate your styling more, is to use the thead tag - seeing as you have used <tbody> this would make more sense.
Also - as a side note, you have no closing tags for your div and body and table - though i assume this is because you only copied part of your code..?
Here is a fiddle: http://jsfiddle.net/f6NKt/2/
the code is as:
HTML
<table style="width:100%;">
<thead>
<tr>
<th colspan="2">Heading - location use th tags</th>
</tr>
</thead>
<tbody>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
</tbody>
</table>
and CSS - notice use of thead instead
.navalt {text-align:center;padding: 4px 0px 4px 4px;border-top: thin solid #C5C9D1;border- bottom: thin solid #C5C9D1;}
thead {padding: 4px 0px 4px 4px;background-color:#E9E1FF;}
thead th {font-size:20px;}
.leftTd {border-right: thin solid #C5C9D1;padding: 0px 0px 0px 5px;text-align:left;width:50%;}
.rightTd {padding: 0px 5px 0px 0px;text-align:right;width:50%;}
Unless I'm missing something, could you not add colspan=2 to the header <td> so it spans your entire table?
<tr class="edHeading"><td colspan="2"><fmt:message key="editprofile.location"/></td></tr>