I think this is not working:
<table style="width: 100%; margin-bottom: 10px">
<tr>
<th style="width: 50px">foo</th>
<th style="width: 70px">bar</th>
<th style="width: 80px">qux</th>
<th>obs</th>
</tr>
#foreach (var item in items)
{
<tr>
<td>#item.foo</td>
<td>#item.bar</td>
<td>#item.qux</td>
<td>#item.gloss</td>
</tr>
}
</table>
The columns just end up having a different width from the specified with the style "width: 50px"
Related
A table of two raw by tinymce:
<table style="width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
</tr>
<tr>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
</tr>
</tbody>
</table>
I can add new class and attributes and reform this default table structure. But is it possible to add etc? for example I want to generate the following bootstrap table:
<table style="width: 100%;" class="table table-bordered">
<thead>
<tr>
<th style="width: 33.3333%;"></th>
<th style="width: 33.3333%;"></th>
<th style="width: 33.3333%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
</tr>
</tbody>
</table>
I can add this class 'table table-bordered'. I can't add <thead>,<th>. I read the documentation of tinymce and googling for 2 days. Know I have come to a conclusion - I will stop if it is actually not possible. Any help is appreciated. Thanks for your time.
my problem is that after sending template mail/ saving template in chrome
e.g. to myself, when I opens it, it looks good, but after a few seconds it looks like it is loosing some css (in this particular case it is loosing borders in bottom table).
Here is the code, it was written in MJML
What is weird, if i send this template not through gmail it looks good even in gmail
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
#media only screen and (max-width:480px) {
#-ms-viewport {
width: 320px;
}
#viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
}
.mj-column-px-300 {
width: 300px !important;
}
.mj-column-per-50 {
width: 50% !important;
}
}
</style>
<style type="text/css">
</style>
</head>
<body>
<div>
<div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:verdana;font-size:20px;line-height:1;text-align:center;color:black;">
Tytul
</div>
</td>
</tr>
<tr>
<td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left;">
<th>
<h3>Desktop</h3>
</th>
</tr>
<tr style="text-align: left;">
<th style="padding: 5px;">TAG</th>
<th style="padding: 5px;">STATUS</th>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Homepage</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Category</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Search</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Offer</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Basket</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">StartOrder</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Confirmation</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Placebo</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td>Comment:</td>
<td></td>
</tr>
<tr>
<td>Comment here</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left;">
<th>
<h3>Mobile</h3>
</th>
</tr>
<tr style="text-align: left;">
<th style="padding: 5px;">TAG</th>
<th style="padding: 5px;">STATUS</th>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Homepage</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Category</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Search</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Offer</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Basket</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">StartOrder</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Confirmation</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Placebo</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td>Comment:</td>
<td></td>
</tr>
<tr>
<td>Comment here</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left; border-bottom: 1px solid black;">
<td style="padding: 5px; width: 82px;">Rate card:</td>
<td style="padding: 5px;">RC here</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px; width: 82px; ">Budget:</td>
<td style="padding: 5px;">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left; border-bottom: 1px solid black;">
<td style="padding: 5px; width: 82px;">Optimization:</td>
<td style="padding: 5px;">text</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px; width: 82px;">Banners:</td>
<td style="padding: 5px;">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Try to sent via another method. Im using Litmus, its working fine or just try to sent via mailjet - i think it should work either and its for free.
You code seems to be correct (checked via https://www.w3schools.com/Html/tryit.asp?filename=tryhtml_form_mail )
Trying to read the following table.
<div class="well" style="background-color: #fff;">
<table class="table table-bordered table-striped table-condensed">
<tbody><tr>
<td style="width: 20%; vertical-align: middle">
<span class="label label-primary">Field0</span>
</td>
<td>Value0</td>
</tr>
<tr>
<td style="width: 120px;">Field1</td>
<td>Value1</td>
</tr>
<tr>
<td><strong>Field2</strong></td>
<td>Value2</td>
</tr>
</tbody>
</table>
</div>
However, I am stuck when I am trying to get each of the values individually.
"return $$('.well').get(0).all(by.tagName('td')).get(0).getText();"
New to coding and i can not for the life of me see why this email is not working in outlook 2010, it's just the top part as well, any advise on how to fix this or
<table>
<tr>
<td valign="top" width="15px"> </td>
<td width="50">
<img alt="" height="99" src="http://www.uploadlibrary.com/first4families/TCM-Test/cell_03.png" width="123" /></td>
<td align="right" valign="top" width="585"></td>
</tr>
</table>
<table bgcolor="#5BBBB7" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td height="340px" width="600px">
<table align="center" cellpadding="0" cellspacing="0" style="width: 574px">
<tr>
<td colspan="3" style="height: 32px; width: 574px">
<img alt="" height="32" height="32px" src="http://www.uploadlibrary.com/first4families/TCM-Test/cell_07.png" width="574" /></td>
</tr>
<tr>
<td rowspan="2" style="height: 279px; width: 13px">
<img alt="" height="279" src="http://www.uploadlibrary.com/first4families/TCM-Test/cell_09.png" width="13" /></td>
<td align="left" bgcolor="#ffffff" style="padding-top: 10px; padding-left: 10px; padding-right: 10px" style="display: block; font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 12px; color: #000000; line-height: 14px; height: 212px;" valign="top" width="218px">
</td>
<td rowspan="2" style="height: 279px; width: 343px">
<img alt="" height="279" src="http://www.uploadlibrary.com/first4families/TCM-Test/cell_11.png" width="343" /></td>
</tr>
<tr>
<td style="height: 67px; width: 218px">
<img alt="" height="67" src="http://www.uploadlibrary.com/first4families/TCM-Test/cell_12.png" style="display: block" width="218" /></td>
</tr>
</table>
I don't think Outlook accepts height / width CSS, so stick to the HTML attributes instead.
Also- take the px off of your html attributes, that should solve a chunk of it.
Set display:block on all your images too, and if I remember correctly Outlook isn't great at rowspan - try and separate your tables rather than trying to have rows with different amounts of columns.
Unfortunately the program I use to send out email does not allow for #media queries nor .css lists at the top of said code. This is problematic seeing as I am building an email template based around floating columns. I would like for the two columns to be next to one another while viewing on a tablet or desktop, but have the list drop underneath the content panel while viewing on a mobile device.
Here is the base of what I have:
<div style="width: 100%; max-width: 650px; margin-left: auto; margin-right: auto;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="1" style="width: 100%;">
--banner image here--
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;">
<tbody>
<tr>
<td align="left" valign="top" width="320px;" style="padding-left: 10px; padding-right: 10px;">
--content goes here--
</td>
<td align="left" valign="top" width="180px;" style="padding-left: 10px; padding-right: 10px;">
--list of links--
</td>
</tr>
</tbody>
</table>
</div>
It's doable. Without media queries you will be limited to how involved you get. This would work well if your columns were of equal width. I'm not sure how your design is, but without a media query it will be challenging to make even columns. Here is some roughed out HTML to get you going.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 650px;">
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" style="width: 100%;"> --banner image here-- </td>
</tr>
</table>
<table align="left" width="320">
<tr>
<td align="left" valign="top" width="320" bgcolor="#00CC99" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td>
</tr>
</table>
<table align="left" width="180">
<tr>
<td align="left" valign="top" width="180" bgcolor="#99CC33" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>