thismethod
Reputation: 533
html tables 100% width
Really sill question but i can't get it to work like i want to... don't do much html anymore. Here's what i got:
<table border="0" width="600" cellspacing="0" cellpadding="0">
<thead>
<tr><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th><th width="10"> </th><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th></tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} </td>
<td> </td>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} </td>
</tr>
</tbody>
</table>
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>{{/depend}} {{layout handle="sales_email_order_items" order=$order}}
<p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
</tbody>
</table>
The second table is not conforming to 600 width, it seems to be overwritten somewhere. I thought if i write any type of inline styles it overwrites everything else. ... I basically want my second table to be the same size as the first.
I've tried just putting an extra <tr><td></td></tr> inside the first table and eliminating the second table altogether but than it makes one td wider and squishes the other in the first two td's
*****This is for an email*****
Here's the header.phtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0;
padding: 0;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing:0 !important;
}
/* What it does: Fixes Outlook.com line height. */
.ExternalClass,
.ExternalClass * {
line-height: 100%;
}
/* What it does: Fix for Yahoo mail table alignment bug. */
table {
border-collapse: collapse;
margin: 0 auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Overrides blue, underlined link auto-detected by iOS Mail. */
/* Create a class for every link style needed; this template needs only one for the link in the footer. */
.mobile-link--footer a {
color: #666666 !important;
}
/* What it does: Overrides styles added images. */
img {
border:0 !important;
outline:none !important;
text-decoration:none !important;
}
@media screen and (min-device-width: 768px) {
/* Hides the nav menu except for gmail */
*[class].desktopHide {
display: none !important;
}
}
/* Media Queries */
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
/* What it does: Overrides email-container's desktop width and forces it into a 100% fluid width. */
.email-container {
width: 100% !important;
}
/* Hides the nav menu except for gmail */
*[class].mobileHide {
display: none !important;
}
/* What it does: Forces images to resize to the width of their container. */
img[class="fluid"],
img[class="fluid-centered"] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: auto !important;
}
/* And center justify these ones. */
img[class="fluid-centered"] {
margin: auto !important;
}
/* What it does: Forces images to resize to the width of their container. */
img[class="stack-column"],
img[class="stack-column-center"] {
width: 100% !important;
max-width: 600px !important;
height: auto !important;
margin: auto !important;
}
img[class="stack-column-half"],
img[class="stack-column-center-half"] {
width: 100% !important;
max-width: 300px !important;
height: auto !important;
margin: auto !important;
}
img[class="stack-column-third"],
img[class="stack-column-third-center"] {
width: 100% !important;
max-width: 120px !important;
height: auto !important;
margin: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
td[class="stack-column"],
td[class="stack-column-center"] {
display: block !important;
width: 100% !important;
direction: ltr !important;
}
/* What it does: Forces table cells into full-width rows. */
td[class="stack-column-half"],
td[class="stack-column-half-center"] {
display: inline-block !important;
width: 50% !important;
direction: ltr !important;
}
td[class="stack-column-third"],
td[class="stack-column-third-center"] {
display: inline-block !important;
width: 32% !important;
direction: ltr !important;
}
/* And center justify these ones. */
td[class="stack-column-center"] {
text-align: center !important;
}
/* Data Table Styles */
/* What it does: Hides table headers */
td[class="data-table-th"] {
display: none !important;
}
/* What it does: Hides table headers */
td[class="data-table-th"] {
display: none !important;
}
/* What it does: Change the look and layout of the remaining td's */
td[class="data-table-td"],
td[class="data-table-td-title"] {
display: block !important;
width: 100% !important;
border: 0 !important;
}
/* What it does: Changes the appearance of the first td in each row */
td[class="data-table-td-title"] {
font-weight: bold;
color: #000000;
padding: 10px 0 0 0 !important;
border-top: 2px solid #eeeeee !important;
}
/* What it does: Changes the appearance of the other td's in each row */
td[class="data-table-td"] {
padding: 5px 0 0 0 !important
}
/* What it does: Provides a visual divider between table rows. In this case, a bit of extra space. */
td[class="data-table-mobile-divider"] {
display: block !important;
height: 20px;
}
/* END Data Table Styles */
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#f8f8f8" style="margin: 0px; padding: 0px; zoom: 100%;">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#f8f8f8" style="border-collapse:collapse;">
<tbody>
<tr>
<td>
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none; visibility:hidden; opacity:0; color:transparent; height:0; width:0; line-height:0; overflow:hidden; mso-hide: all;">
Shop new arrivals now!
</div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email wrapper : BEGIN -->
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="width:600px; margin: auto;" class="email-container">
<!-- Full Width, Fluid Column : BEGIN -->
<tbody>
<tr>
<td style="font-family:Helvetica, Arial, sans-serif; color: #999999; font-size:10px; text-align: right;">
<a href="[[BrowserLink]]" title="View In Browser" style="color: #999999;">View in Browser</a>
</td>
</tr>
<!-- Full Width, Fluid Column : END -->
<tr>
<td>
<!-- Logo + Links : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="5" style="font-size: 0; line-height: 0;"> </td>
</tr>
<tr>
<td valign="middle" align="center" style="padding:0px 0; text-align:center; line-height: 0;" class="stack-column-center">
<a href="http://www.website.com/?email=#Listrak\Email#" title="website.com"><img src="http://cdn.website.com/media/wysiwyg/emails/ecomm/2016_0524_dresses/0524_Dresses_09.jpg" alt="website Stone" width="600" height="70" border="0" style="margin: auto;"></a>
</td>
</tr>
<tr>
<td height="5" style="font-size: 0; line-height: 0;"> </td>
</tr>
</tbody>
</table>
<!-- Logo + Links : END -->
<!-- Menu : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<!-- Menu : END -->
<!-- Free Shipping Pre-Header : BEGIN -->
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="mobileHide" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-top: 0px solid #eeeeee;" height="2">
<img src="http://media.website.com/6385/Shared/sca/spacer.gif" style="display: block;" height="1" border="0">
</td>
</tr>
</tbody>
</table>
Upvotes: 0
Views: 11684
Answers (2)
Dave Cripps
Reputation: 929
Looking at your first bit of code with just the two tables, they are displayed at the same width. I modified your code to put a size 2 red border on both tables and you can see they are indeed both the same width.
<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th>
<th width="10"> </th>
<th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} </td>
<td> </td>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} </td>
</tr>
</tbody>
</table>
<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
{{/depend}} {{layout handle="sales_email_order_items" order=$order}}
<p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
</tbody>
</table>As for your second bit of code (the header.phtml file), I'll be honest, I don't quite understand how that ties in with your first. The code you provided is incomplete and nested tables within tables within tables (many of which are single row, single datacell) is just too overly complex to decipher here.
Since this is for an email, and I have battle scars from my own fights getting proper HTML formatting within an email, I will say that you have to throw out all modern standards and styles of HTML development, especially when it comes to Microsoft email clients, and pretend it's the 1990's again. Nested tables are unfortunately sometimes necessary to get what you want (shudder). Just like with any HTML design, the simpler the layout, the easier time you will have achieving it.
Here are also a few links that I found invaluable for reference and education when it came to getting an HTML email to behave properly. Hopefully they will help you as well:
- How To Make An Email Newsletter That Looks The Same
- CSS Support Guide for Email Clients
- What You Should Know About HTML Email
- Tips and Best Practices for HTML Emails in Outlook 2007, 2010
Upvotes: 1
Chandramouli
Reputation: 572
Actually both tables have same width. If you update border="01" then you will see width of the tables properly.
If you want to remove second table, add another row in the first table with colspan attribute is equal to 3 because first table has 3 columns.
<tr><td colspan="3"></td></tr>
I would like to suggest using css classes rather than inline styles.
Upvotes: 1
Related Questions
- CSS to make table 100% of max-width
- 100% table width for html email
- Responsive table for Email
- 100% width table in email with single fixed width cell
- How can I maintain the width of a table?
- TD taking up entire width of row
- HTML TD width not taking effect
- HTML email table widths
- Responsive email, creating an HTML table
- Building an HTML table, TD widths are not even