In the following JS-Fiddle example, why the inner table expand to the width of the screen, when its container has a max width property set?
<table bgcolor="white" cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%">
<tr>
<td style="max-width:580px; border: solid 1px green">
<table bgcolor="red" cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%">
<tr>
<td>
MY TEST CELL!!
</td>
</tr>
</table>
<td>
</tr>
</table>
<table> element uses css property display: table which doesn't behave "normally". If you want your elements to behave as expected, use display: inline-block or display: block. This way your element will actually pay attention to your max-width declaration.
However, it seems you are trying to use tables to layout your content, and this is a bad practice. Tables are used for tabular data only. If your content is a paragraph, use <p>, for instance.
Also try to avoid inline styling, always use external css files.
Related
The structure of my table is
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
<h1 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:16pt;font-weight:100; margin-bottom:10px;">Simpilfied IT management for any enterprise</h1>
<h2 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:14pt;font-weight:100;">Gain control over any hybrid cloud with our cost-effective all-in-one cloud solution</h2>
</td>
</tr>
</table>
aand I want the image inside the first cell to have the same height as the second cell (so that the image blends into the background color of it. I know there are alternative ways of doing this, but I'm constrained since this is an HTML email for Outlook).
Right now the right cell is always having a height of 196px, even if I strip its contents to nothing:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
</td>
</tr>
</table>
The right cell is always 196px and this causes the left cell to be the same height. Makes no sense.
If you add a display: block to the style of your image it will be fixed.
<img src="//placehold.it/404x192" style="width:404px; height:192px; display: block" />
The first answer should help you to understand why
EDIT: Actually, you dont need nothing but the display block and the image sizes.
What are the dimensions of your image?
I don't think HTML is "smart" enough to stretch your image to fit to your exact request.
Maybe you should try resizing your image in paint/photoshop to a dimension that has the same height/width ratio as 404:192 and see if that helps.
I'm trying to lay out a responsive email template to work across all major clients, and I'm just about there, but since Outlook doesn't support max-width, and I have all elements set to width: 100%, it's putting my content all the way to the left since it's left-aligned. I can center the header and footer with align:center or margin: 0 auto.
What can I do to prevent my content from going all the way to the left without giving anything a fixed width or using max-width (which I am using, but Outlook just ignores)?
Sounds like you are referring more to a "fluid" layout (basing off percentage) rather than a "responsive" one (where you would use media queries to specify styles based on width of display device).
Since setting a pixel value for the margin-left wouldn't make a lot of sense, why not set the margin-left to a percentage value?
margin-left: 4%;
Otherwise, you might want to take a look at the following resource found on MailChimp regarding media queries.
http://templates.mailchimp.com/development/media-queries/
Try this and use media queries to adjust the width percentages at different screen sizes if needed. Just keep in mind that your media queries won't take effect in these email clients.
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#252525">
<tr>
<td align="center" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10%">
</td>
<td align="left" width="80%" bgcolor="#FFFFFF">
<br>content<br>...<br>
</td>
<td width="10%">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
I have this code :
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
</table>
As you can see, the first tr/td should be height 60px (min-height:60px) but in fact it isn't.
For many reasons, I can't use height directly (this code is formatted trought back office system, in a newsletter).
So, how can I take the whole height on the td trought min-height?
Also, tried putting min-height:60px; on tr, but nothing change...
min-height doesn't work for table elements:
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
I can only assume this applies to td and tr as well.
What should always work is wrapping the content in a div, and applying min-height to that, as shown in this JSFiddle:
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
<div style="min-height: 60px; background-color: green">
This is my text that I need in 2 lines
</div>
</td>
Edit: You say this doesn't work with Outlook.
Alternative idea: Place a 60 px tall image in the td, and make it float: left:
<td>
<img src="..." style="float: left">
</td>
Use <td height="60"> not CSS height or min-height
For HTML email set your table cell as <td height="60"> and it will treat that as the min-height. If your content is more than 60px, it will expand accordingly.
Put a DIV in the cell, style the DIV instead.
Min-height doesn't works on tables.
It is sometimes useful to constrain the height of elements to a certain range. Two properties offer this functionality: min-height & max-height
But these can't be used on non-replaced inline elements, table columns, and column groups.
You can't set min-height and min-width, but you can use some CSS3 for achievements this same effect.
.default-table table {
border-collapse: collapse;
}
.default-table table td {
padding: 0;
}
.default-table tr:before {
width: 0px;
content: '';
float: left;
overflow: hidden;
height: 28px;
font-size: 0;
}
.default-table {
overflow: hidden;
}
<div class="default-table">
<table>
<tbody>
<tr>
<td>Steve</td>
<td>Smith</td>
<td>stevesmith#gmail.com</td>
</tr>
<tr>
<td>Jone</td>
<td>Polanski</td>
<td>jonep#gmail.com</td>
</tr>
</tbody>
</table>
</div>
but if u having collapse or padding in td. You must give for .default-table table minus margin-left.
HTML :
<table></table>
CSS :
table{
height:0px; /*Set any facultative length value to Height (percentage value doesn't work)*/
min-height:100vh;
}
That's how I always resolve this problem ...
Add display block
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;display:block;">
Here's a solution that works in Outlook (tested) and other e-mail clients:
<td style="mso-line-height-rule:exactly;line-height:300px;"> </td>
This is cleaner than using an image, which could negatively affect your spam score, and does the exact same thing.
If you have other content in the <td> that you don't want to have that line height, you can just wrap the non-breaking space in a <span> and set the line-height on that tag:
<td><span style="mso-line-height-rule:exactly;line-height:300px"> </span>**Other content without 300px line-height here**</td>
The reason height or min-height works on <div> tags and not <td> is because <td> are set to display:table-cell and do not respect height the same way that display:block (<div>) elements do.
I have resolved this issue by adding display:block; to its style as
<td style="display:block; min-height:200px;">
min-height does not work in td, Set height that will work like min-height and automatic increase height if needed. That is worked for me
Here is a solution that does not depend on the height in pixels. It works in all email clients:
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
<td style="font-family:Arial;font-size:12px;line-height:14px;">
<br/><br/>
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
The solution works by adding a zero-width column with two lines to the right of the first one. It uses the character, which is a non-breaking zero-width space.
It may be reviving a 2012 post, for those who searched and found this post like me:
Note: Check these addresses for the email client support before using this method, at the time of writing this answer, the support was around 50% -ish.
E-mail client support range of :first-child
E-mail client support range of ::before
table tr:first-child td:before {
min-height: 100px;
display: block;
content: ""
}
<table border="1">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
What I found !!!, In tables CSS td{height:60px;} works same as CSS td{height:60px;}
I'm working on an HTML email campaign (no CSS allowed) so I'm forced to use tables, something I'm not super familiar with. I've got everything looking right EXCEPT the table borders. Whenever I create a new <tr> I cannot for the life of me get rid of the inner border around the content. I have tried a few tricks (border="0px", bordercolor="white", bordercolor="#ffffff", etc), but whenever I send a test message, the borders still show up black around my text and images.
This is really messing with my design flow.
Is there any trick I don't know to getting rid of HTML table borders? Help!
<table border="0" cellpadding="0" cellspacing="0" width="100%" style = "border-collapse: collapse;">
Apply this:
style = "border-collapse: collapse;"
To every table cell, the border should not be visible anymore.
If the content is an image, try <td valign="top"> for all <td> with images inside.
Besides that, the table tag should be <table cellpadding="0" cellspacing="0" ...>. One more tip, use inline style for the borders that you want.
To get rid of the table borders, use <table border="0">.
Try this:
In head:
<style type="text/css">
table td {border-collapse: collapse;}
</style>
Table:
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border:2px solid #000000;">
<tr>
<td width="50%" bgcolor="#999999" style="padding:20px;">
...
</td>
<td width="50%" bgcolor="#888888" style="padding:20px;">
...
</td>
</tr>
<tr>
<td width="50%" bgcolor="#777777" style="padding:20px;">
...
</td>
<td width="50%" bgcolor="#666666" style="padding:20px;">
...
</td>
</tr>
</table>
Also, always keep cellpadding and cellspacing at zero. Use padding in your cells if you want spacing.
Use <table border="0"> without px?
How about
<table style="border-collapse: collapse;">
<!-- ... -->
</table>
? Such inline CSS should work fine even in HTML email.
Just came across this tip that actually works (at least for iOS):
To prevent [hairline borders] from happening nest the problematic
table into a new table with a background color that matches that of
the inner table.
Source: http://www.informz.com/blog/template-design/quick-tip-removing-hairline-borders-in-html-emails-on-iphone-ipad/ (includes photos of source code)
Following worked for me:
border: 0px solid white;
border-collapse: collapse;
I have a table nested as such:
<table>
<tr>
<td>
<table>...
</table>
</td>
</tr>
</table>
More precisely:
some style info:
div.centered{
text-align: center;
height:100%;
}
div.centered table.centeredT {
margin: 0 auto;
text-align: left;
max-width: 781px;
overflow: hidden;
height:100%;
}
Layout:
<table style="height:100%; min-height:100%;" class="centeredT" border="1" cellpadding="0" cellspacing="0" width="781px" >
<tr>
<td style="vertical-align:top; padding-bottom:7px;padding-right:5px;width:33%;height:100%;">
<table style="table-layout:fixed;height:100%;min-height:100%;border:solid 1px black;" border="0" id="Table1" cellspacing="0" cellpadding="0" class="verdanaSmall" width="257px" >
<!--this first row is simply a spacer row because I am using table-layout:fixed attribute -->
<tr>
<td width="80px"></td>
<td width="175px"></td>
</tr>
<tr >
<td colspan="2" style="height:100%;">
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-top: solid 1px black; border-bottom: solid 1px black;">
<tr>
<td style="text-align: left; vertical-align: middle;"> 1.) </td>
<td align="center" height="20">
<a href="results.asp?pubid=31422&date=10%2F11%2F2010&ttype=eqq"target="_top">
<font face="Verdana" size="2" color="#22476C"><b> Abilene Reporter News </b></font>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><font face="Verdana" size="1" color="#22476C"> Monday, October 11, 2010 </font></td>
</tr>
<tr>
<td align="center" colspan="2" height="100%" id="imagetd">
<a href="../PDFView/PDFView.aspx?pgID=32065209&adID=96332396&ref=50" target="_blank">
<img src="/pages/201010/11/31422/thumbs/A000300001H.gif" style="border: solid 1px black;" alt="" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
The reason for this is that the page is filled dynamically and the inner table is inserted inside a data loop. Anyway, the question is that the inner table is not filling 100% of the available height of the encapsulating td cell. I have set the inner table height, via css, to 100%, the encapsulating table, and also the body tag and so on up the chain. If you look at the page in firefox and opera it lays out perfect but IE does not seem to be obeying the height specifics and just making the table big enough to display the data, does anybody know of a hack/fix for IE, or a way I can correct this..?
As the problem describes: the td-element itself does automatically stretch to 100%, but (in IE) for some reason its height is not passed to its children as 100%.
The solution is quite simple: just add 'height: 100%' to the td-element that is parent of the nested table. This way 100% height will be passed to the td's children when using height: 100%; on them.
It fixes the problem in IE and doesn't seem to cause any problems in other browsers (tested on new browsers Chrome, Firefox and IE).
NOTE: setting the td's height to 100% with an nested table may cause the cell to expand too much. In that cause the height may have to be adjusted to compensate the height of the other rows. With CSS3 this can be easiliy achieved with calc(100% - [height of other rows])
PS: I'm aware that the above question is really old, but I stumbled upon this while googling for a simular problem and it seems no (correct) answer has been provided to this one. For others who will find this page just like I did, it might be helpfull to find an
answer.
Try set padding:0px; on cointaner and inner table.
Ok I havent tested anything but it doesnt look like you have set the inner table height to 100%. You have a class table.centeredT but you have not specified the class on the table. Nor have you specified height: 100% on the inner table itself. Give me a few more minutes and I will try to achieve this on jsfiddle.
Edit: One thing which did just occur to me - which wont be causing the problem but just decreases the code a bit - is that you could use the col attribute instead of an extra row at the top. I have heard that this isnt 100% supported, but I have never had a problem with it personally.
Edit: Ok I have no idea... spent ages on this and not getting anywhere. I personally havent used tables in months - I am good enough at divs, float and clear and alike that I can easily make what looks like a table without a table. If I had to display data in a meaningful way then I would use a table. Is this for displaying data, or can it be displayed just using divs / float / clear?
You need to have fixed heights of the elements that should be spanned to 100% height. Fixed heights means you'll have to set them in pixel height instead of percentage. See this SO question and solution with similar code:
Iframe { height:70%;} not working in IE 8 and Firefox