I'm trying to make the table wide from border to boarder but it didn't went as expected. Bellow is an example
<table style="width: 100%;" cellspacing="0" cellpadding="0" border="0" width="100%" align="center">
<tr>
<td bgcolor="$bordercolor">
</td>
</tr>
</table>
I want the table to start excatly from the boarder of the page but there is still a little space, the white space, before it begins. You know why? Attached picture
I'd suggest trying the below;
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
Here's an example: https://jsfiddle.net/x1tvohas/
Related
I am coding a html email, the problem is that I have a black border around my table, when I slcide psd make it no image and set background color like this
<td width="640" height="2" colspan="16" style="background-color:#666666;">
left and right <td> look ok in html and the email client, but the upper and bottom one are bit expanded, see attached image for this
This is in my laptop upper <td>
and this is how it looks in emails
code is simple as
<td width="640" height="2" colspan="16" style="background-color:#666666;">
</td>
What's the problem with it? Please help ..!
Outlook expands all table cells to a minimum of 19px high. This is something you'll need to work around in html email design. One method is to create a 20px high image that has your 2px border across the bottom.
Add this to your CSS and see how it works:
body
{
margin: 0;
padding: 0;
}
try adding
style="border-collapse:collapse;"
to your
<table>
like this
<table style="border-collapse:collapse;">
Your table has borders, as is the standard. This is my snippet for all of my tables' structure-
<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left">
</td>
</tr>
</table>
Is there a spacer gif in your TD ?
If yes, the trick is simple :
<img src="SPACER" border="0" style="display:block;" height="x" width="y" alt="" />
This will collapse the white space around your images. Make sure you set the same height to your td and img also.
I think you might need to add some position property
Try position: absolute
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>
Please help, I'm at my wits end as I'm trying to make a responsive email, going from two columns to a single one, everything goes perfect until I reach Outlook2013, it adds a single black line to the right of each table that is aligned next to each other.
I've tried to reset it with the border-collapse:collapse function, but it's not having any effect.
I basically have two tables left aligned in a tablecell.
<tr>
<td align="left" style="border-collapse:collapse"><table width="300" border="0" style="border-collapse:collapse" cellspacing="0" cellpadding="0" class="contenttable" align="left">
<tr>
<td align="left" class="headercell" height="399" width="300" style="line-height:399px"><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="image" style="display:block; width:100% height:auto" alt="" border="0px" height="399" width="300" /></p></td>
</table> <table width="300" border="0" cellspacing="0" cellpadding="0" class="contenttable" style=" border-collapse:collapse" align="left">
<tr>
<td align="left" class="headercell"><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="image" style="display:block; width:100% height:auto" alt="" /></p></td>
</table></td>
</tr>
Usually I find that the colour of the mystery border is the same as the background-color on the body element. EG if you have a green background with white content areas, the lines will be green on white.
To fix it in this case you can set the body background to be white and that will fix it. The gaps are still there, but you can't see them. You would then apply the green background colour to a container table instead.
Yeah. That's Outlook showing the 1px gaps/borders it keeps between floated tables. You cannot get rid of it. Kinda. You can recolor it though.
For the little 1px gaps/lines you need to add:
border: 1px solid #COLOR;
to every floated table being sure to adjust the width of your tables to avoid "float drop". Where #COLOR is the background color of your tables.
If you're having problems with BIG gaps you need to put this in your head in a style tag:
table {mso-table-lspace:0pt;mso-table-rspace:0pt; border-collapse:collapse;}
I have the following structure
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="width:60px;">
...
</td>
<td>
<div style="width:100%;overflow-x:hidden;">
PROBLEMS ARE HERE
</div>
</td>
</tr>
...
</table>
The first td takes 60px, the second one takes the rest of the 100%, but when I have some long text with no spaces and no dashes the table becomes larger then the 100%.
How to display the non-breakable text in one line or on multiple lines (both ways are acceptable) and keep the table on 100% of the screen?
I've tried to fix this with overflow-hidden but it has no effect.
Here's a screenshot of the problem:link
Set table-layout : fixed in your css or <table style='table-layout : fixed'> that oughta fix it.
Here is the code sample. Check it out.
try the following:
<table style="word-break:break-all;" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="width:60px;">
...
</td>
<td>
<div style="width:100%;overflow-x:hidden;">
PROBLEMS ARE no longer HERE !
</div>
</td>
</tr>
...
</table>
There is a CSS3 property, word-wrap:break-word; that does exactly what you need. But unfortunately it doesn't work with table cells. I think you need to rethink your structure, opting for a table-less design.
I wrote this example for you
<style>
section { /* your table */
display:block;
width:300px;
background-color:#aaf;
}
section:after {display:block; content:''; clear:left}
div { /* your cells */
float:left;
width:100px;
background-color:#faa;
word-wrap:break-word;
}
</style>
<section>
<div>Content.</div>
<div>Loooooooooooooooooooooooooooooooooooooooong cat.</div>
</section>
P.S: word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
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;