HTML - How to apply padding to a horizontal border? - html

Question

I have a HTML newsletter table, to structure the content I want horizontal borders. Somehow the horizontal borders always have 100% width according to the table width. How can I achieve 20px padding to the left and right of it?
js fiddle
HTML
<table border="1" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr style=" padding: 0 20px 0 20px;">
<td style=" padding: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>

Answer 1

you can't able to do what you want in current code
you need to do some trick
see this
<table border="0" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr >
<td> <hr style=" border:0px; margin: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>
i have used (HR) tag in 2nd table row, this will solve your problem ☺

Answer 2

A border does not take padding into account, but it does with margin. See the CSS Box Modell for reference.

Answer 3

On CSS, there is the cascade. It parses top-dowmn and specific overrides general

Answer 4

There are many ways to achieve what you want (including ways in which we have to change the HTML code). Suppose you want to keep the table layout. You can just set the border-left and border-right of the middle td like this:
tr.hr > td {
border:none;
border-left:20px solid white;
border-right:20px solid white;
background:red;
height:3px;
}
HTML:
<tr> <td> Banana </td> </tr>
<tr class='hr'> <td></td></tr>
<tr> <td> Apple </td> </tr>
Demo.
Note that the color of border-left and border-right should be the same to the background color of your table. (they are all white in the demo).

Answer 5

Please have a look at the HTML email boilerplate.
http://htmlemailboilerplate.com/#f1
Limitations using CSS: http://www.campaignmonitor.com/css/. It solves may issues with ie. spacing amongst others and email clients rendering issues (Gmail, Outlook,Yahoo, ...)
HTML emails need to respect 600px width as it is a default for the preview.
To test the HTML email (if no mail configured on a testing server) you could use http://putsmail.com/ Check also on smart phone as many people tend to read mail on it
You can achieve the effect using a combination of 3 cells where the first and last use spacers and the middle can be a red solid color gif.
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
<td valign="top" width="560">
<img src="red.gif" width="560" height="3" alt="" />
</td>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
</tr>
</table>