How to limit the length of a border in css? - html

I have a screenshot as shown below which I have to replicate in html/css.
Attached is the fiddle for the above screenshot which I am able replicate at this moment.
Problem Statement:
I am wondering what changes I need to make in the inline styles in the fiddle so that I am able to limit the length of a border. At this moment, it is covering the full screen.
The snippets of code which I have used in order to achieve the above screenshot are:
<tr>
<td style="text-align:left;padding-left:10%;padding-bottom:1%;">poster: donald duck</td>
<td style="text-align:center;;padding-left:10%;padding-bottom:1%;">customer: donald duck</td>
</tr>

Based on the code you gave in the fiddle,you set the width attribute in the table tag width="100%", try set it to whatever value you want.
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size:
20px;
...
">
to
<table cellpadding="0" cellspacing="0" border="0" width="600" style="font-size:
20px;
...
">

You can try doing this.
You need to add margin: 0 auto; to align it to center
Set the width of the table so it will have a limit and will not occupy the whole screen.
Please see the code below.
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="50%" style="
margin: 0 auto;
font-size: 20px;
border-bottom: 2px solid #484848;
border-top: 2px solid #484848;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 5%;
padding-right: 5%;
">
<tr>
<td style="text-align:left;padding-bottom:1%;">poster: donald duck</td>
<td style="text-align:left;padding-bottom:1%;padding-left: 10%;">customer: donald duck</td>
</tr>
<tr>
<td style="text-align:left;padding-bottom:1%;">phone: 613-613-6134</td>
<td style="text-align:left;padding-bottom:1%;padding-left: 10%;">phone: 613-613-6134</td>
</tr>
<tr>
<td style="text-align:left;padding-bottom:1%;">email: dduck#gmail.com</td>
<td style="text-align:left;padding-bottom:1%;padding-left: 10%;">email: dduck#gmail.com</td>
</tr>
</table>
</td>
</tr>

Related

HTML Table can't change the position of the text

I am trying to change the position of the text to the TOP of the center. I am using table which i need to use in email template.
Here is my fiddle
https://jsfiddle.net/g2sbhf7k/
<td height="1"><p>hello</p><p>hello</p> </td>
this is showing in middle left, but i need to show in top center
Thanks
See if this helps
<td style="vertical-align: top; text-align: center;" height="1">
<p>hello</p>
<p>hello</p>
</td>
Using all the rest of your code, I just added a class
html:
<td height="1" class="topCenter"><p>hello</p><p>hello</p> </td>
css:
.topCenter{
text-align: center;
vertical-align: top;
}
Your answer is here .... though I've shorten some code:
https://jsfiddle.net/SAS3000/tx6zfgba/
table table {
width: 191px;
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
border: 1px solid #ddd;
}
td {
text-align:center;
vertical-align:top;
}
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;width:600px;background-color: #ffffff;">
<tr>
<td align="left">
<table height="180px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="1">
<p>hello</p>
<p>hello</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
This can be done at table level without CSS as well.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">centered text</td>
</tr>
</tbody>
</table>

Email html not stretching table full width on mobile

I really hate email html. So I have created a new confirmation email for our business and I need the white blocks in the picture below to be the same width. On desktop they look completely fine and match.
Without pasting the full template, this is how the code is structured with the css I am using:
<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>First heading</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>Second heading</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And the picture of the issue on mobile:
I am pretty sure that because 600px isn't available on a device that size that it's seeing how with the content is, but I can't use media queries, so not really sure where to turn.
the layout displaying as per your content width in TD. the above HTML code you have give "first heading" and "second heading " as content so characters of second heading are more than first heading so width will not match.
solution is:
<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>First heading</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>Second heading</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

HTML / CSS Table Placement

Below is my code for 2x tables. There is PHP & results I have removed. But I cannot get these on one line but next to each other.
I have tried Align Left/Right and this puts them on 2x separate lines? I have tried float as well and this has not helped either.
Does anybody have advice for me?
HTML
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
<tr align="center">
<td colspan="16" class="header"><center>Last 5 Received Transactions</center></td>
</tr>
<tr align="center">
<td class="header"><center>Transaction ID</center></td>
<td class="header"><center>Sent To</center></td>
<td class="header"><center>Amount</center></td>
<td class="header"><center>Date</center></td>
</tr>
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
<tr align="center">
<td colspan="16" class="header"><center>Last 5 Sent Transactions</center></td>
</tr>
<tr align="center">
<td class="header"><center>Transaction ID</center></td>
<td class="header"><center>Sent By</center></td>
<td class="header"><center>Amount</center></td>
<td class="header"><center>Date</center></td>
</tr>
</table>
CSS :
table
{
border: #000000 1px solid;
background-color: #363636;
}
You could also add a class of left and right to each table and define floats in your css if you want the tables to always align left and right.
table.left {
float: left;
}
table.right {
float: right;
}
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="left">
YOUR LEFT TABLE content
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="right">
YOUR RIGHT TABLE content
</table>
You don't need the 'table' class because you can use the table tag as a selector.
Try adding display:inline-block;
Update CSS
table
{
border: #000000 1px solid;
background-color: #363636;
display:inline-block;
}
WORKING:DEMO
Float doesn't work on display: table which is the default table display property.
You have to put display: block on it in order to float them
table {
border: 1px solid #000;
display: block;
float: left;
width: 40%;
}
table:first-child {
margin-right: 40px;
}
Working Fiddle

HTML - How to apply padding to a horizontal border?

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>
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 ☺
A border does not take padding into account, but it does with margin. See the CSS Box Modell for reference.
On CSS, there is the cascade. It parses top-dowmn and specific overrides general
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).
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>

A way to center TD in TR?

I am working on HTML email and trying to center a green TD in a white TR so that there's a 20px white margin on the left and right of the green box.
I tried setting TD width for the green portion and setting margin 0 auto but the green just expands to the width of the TR.
Tried putting in 2 more TDs to push the green TD into the center and that didn't work either.
Including the code snippet, am having trouble with the TR that has #a6d971.
<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
<tbody>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
</td>
</tr>
<tr bgcolor="#fff" height="75">
<td valign="top" style="text-align:center;">
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
Regular sales happen every day
</p>
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
9am - 11pm
</p>
</td>
</tr>
<tr bgcolor="#fff" height="75" padding="10">
<td bgcolor="#000" width="20"></td>
<td bgcolor="#a6d971" width="300" style="margin: 10;">
</td>
<td bgcolor="#000" width="20"></td>
</tr>
<tr bgcolor="#fff">
<td valign="top">
<table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
<tbody>
<tr>
<td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
<h3>Nine # Nine</h3>
<p>Fuel up! Dresses, tunics and other items including:</p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
</td>
</tr>
</tbody>
</table>
Switch to DIV's and CSS, most emails client supports styles pretty well, you can use a DIV inside your TD element, it'll be easy to center or do other things you might want.
For Example
<tr style="background-color: white;">
<td style="background-color: green;">
<div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
</td>
</tr>
Also note if you use DIV's you can also avoid tables.
Hack on top of a hack.
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
This is stuff.
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/zy6GU/
Incidentally, the same thing should work with a DIV:
<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>
http://jsfiddle.net/zy6GU/1/
If you HAVE to use tables, might as well abuse them a little:
<table><tr align="center">
<td width="50%">one</td>
<td style="background-color:green">two</td>
<td width="50%">three</td>
</tr></table>
http://jsfiddle.net/mblase75/yntfu/
I'm not a CSS expert but this works for me (with no extra tags) :
<table>
<tr style="background-color: white; border: 1px solid black;">
<td style="background-color: green; display: block; margin: 0 20px;">
<!-- Content -->
</td>
</tr>
</table>
What are you talking about 'for emails'? You mean an email address, like Email Me? If so you'd want some css that centers the link in the TD, or in combination with colspan on the TD.