I am trying to make a HTML email layout using table row, where text and image is being showed in one row. But I am not able to fit in
This is what I want it to look like
My code:
<table>
<tr>
<td class="padding">
<table class="content3">
<tr>
<td>
<p style="padding: 20px; background-color: #f7f7f7;">
Learn how to sync your smartwatch or a fitness band with the Vantage Fit app here.
</p>
</td>
<td>
<img src="images/smart-devices.png" width="150px" style="background-color: #f7f7f7; display: inline;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
By setting a fixed height for each <td> element. The design could be achieved.
I have rearranged the code at codepen: https://codepen.io/samuvpd/pen/gOWbXRx
Looks like the <td> on the right adapts it's size to the width property you set to 150px. You could try setting both <td> at 100% height and then set the <tr> to the size you want.
Technically if you give the parent a size and tell the children to fill 100% of it it should behave as you wanted.
This seems to be caused by the <p> default margin, those 2 <td> are actually the same height but the background color doesn't apply to the margin so it looks smaller.
I would recommend removing that margin and making the <td> have the background color.
td {
background-color: #f7f7f7;
}
<table>
<tr>
<td class="padding">
<table class="content3">
<tr>
<td>
<p style="padding: 20px; ">
Learn how to sync your smartwatch or a fitness band with the
Vantage Fit app here.
</p>
</td>
<td>
<img
src="mages/smart-devices.png"
width="150px"
style="display: inline"
/>
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
I have this code below.
If I run this code here on a browser, everything works fine.
But, in an HTML e-mail: the code does not work as intended.
The height seems to be the main issue, the height I have configured automaically becomes min-height on an HTML email.
This is what it looks like on the email:
My ultimate goal is to: center an image horizontally and vertically inside of a element that has defined width and height in an HTML email (sample of desired output is on the runnable snippet below).
<table>
<tbody>
<tr>
<td style="padding-top:10px;">
<p style="text-align:center;height: 105px;background-color:#282828;width: 80px;" height="85">
<span style="display:inline-block;height: 100%;vertical-align:middle;" height="85px"></span>
<img width="50" height="75" style="/* min-height:80%; */vertical-align:middle;" src="https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fawsdevelopment.tzilla.com%2Fartwork%2Fgenerate%2F285cf3ee-4ecc-40ee-917d-d743eba4da8e-out.png&t=1542159076&ymreqid=b0ed4f41-e1fa-3871-1c54-fe002f014500&sig=.ZExttgldk1nd96JyybAyQ--~C">
</p>
</td>
<td>
<span>Adult Classic Tee</span>
</td>
<td>
$ 21.00
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td style="padding-top:10px;">
<p style="text-align:center;height: 105px;background-color:#282828;width: 80px;vertical-align: middle; display: table-cell;" height="85">
<span style="display:inline-block;height: 100%;vertical-align:middle;" height="85px"></span>
<img width="50" style="/* min-height:80%; */vertical-align:middle;" src="https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fawsdevelopment.tzilla.com%2Fartwork%2Fgenerate%2F285cf3ee-4ecc-40ee-917d-d743eba4da8e-out.png&t=1542159076&ymreqid=b0ed4f41-e1fa-3871-1c54-fe002f014500&sig=.ZExttgldk1nd96JyybAyQ--~C">
</p>
</td>
<td>
<span>Adult Classic Tee</span>
</td>
<td>
$ 21.00
</td>
</tr>
</tbody>
</table>
I want to add table to my website that will not change height or width when I added a picture. The picture needed to automatic resize to td.
How can I do it?
<table style="width:100%" border="1">
<tr>
<td style="width:34%"><!--Right-->
<table border="1" style="width:100%">
<tr>
<!--Symbol--><td>
<i class="fa fa-arrow-circle-right" style="font-size:72px"></i>
</td>
<!--Name--><td style="text-align:center"><b><font style="font-size:42px">dsfdsfs</font></b><br /><font style="font-size:32px">sdfdsdsf</font></td>
<!--logo--><td>
</td>
</tr>
</table>
</td>
<td style="width:32%" rowspan="8"><!--center-->
</td>
<td style="width:34%"><!--Left-->
<table border="1" style="width:100%">
<tr>
<!--logo--><td></td>
<!--Name--><td style="text-align:center"><img src="images/company/integrity.png" /></td>
<!--Symbol--><td style="text-align:left">
<i class="fa fa-arrow-circle-left" style="font-size:72px; left:0"></i>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use max-width and max-height and set it to size of td or 100%
And I would like to suggest you NOT to write inline styles...
you using the % value to the table. So table are using current resolution i mean of the window in which you opened the page. In order to say for the table to stay in same height you need to use pixels for example:
570px; not 100% or 50% of the viewing screen.
so for the fist line i believe you can simple use the pixel value.
for example:
<table style="width:1200px" border="1">
for the image don't forget to add 100% values for example:
<td style="text-align:center" width="100%" height="100%"><img src="images/company/integrity.png" /></td>
I want a table to get the same width as the window and if it´s to wide I want to be able to scroll the table. Today the table gets wider then the window and you have to use the scrollbar on the window instead of the scrollbar on the div that contains the table.
(I have noticed that if I remove the first table it works great, but I can´t remove that because my html-code will be inserted in a page that has this table-tag.)
<table style="width:100%;">
<tr>
<td>
<div style="width:100%;overflow:scroll;">
<table style="width:100%;overflow:hidden;">
<tr>
<td>
<div style="width:900px;">Kolumn123</div>
</td>
<td>
<div style="width:900px;">Kolumn123</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
Here is a JSFiddle demo
The div's width needs to be determined to be smaller than its inner table. Because here it is set to be 100% and everything will be calculated bottom down that makes the scrollbar appear at the outmost container.
If you cannot change the first table, then try to use javascript to get the window's size and set it to the div.
try this--
<div style="overflow: scroll;">
<table>
<tbody>
<tr>
<td>
<div style="width:100%;">
<table style="width:100%;overflow:hidden;">
<tbody><tr>
<td>
<div style="width:900px;">Kolumn123</div>
</td>
<td>
<div style="width:900px;">Kolumn123</div>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
See the following documents:
<table>
<tr>
<td>
<p>foo bar baz</p>
</td>
</tr>
</table>
and this:
td {
padding: 10px;
border-bottom: 1pt solid gray;
}
which results in something like
The rule is always the width of the table cell. Is there any CSS/HTML way of making the rule smaller (taking up less space horizontally)?
I need the rule to be some specified size which is smaller than the cell width. This is how it should look like (I hope you get the point - and the double dash is easy, of course):
123.44
2312.49
--------
12.12
1231.44
========
1234.33
Do you mean that the bottom border should be shorter than the width of the td? In that case this is not possible, however you could add an element that represents your border and give that element a width shorter than 100%. Technically I would advise a hr but div could do the same thing and is perhaps easier to understand.
HTML
<table>
<tr>
<td>
<p>foo bar baz</p>
<div style="width:75%;border-bottom:1px solid #000;"> </div>
</td>
</tr>
</table>
Live demo
http://jsfiddle.net/Zs9dG/
If you are going to have a paragraph in each table cell, why not put the border on that?
td > p {
display: inline;
border-bottom: 1pt solid gray;
}
Setting the <p> to display: inline will mean the border is as wide as the content inside it. You could then give the table cells more horizontal padding and you should end up with the effect you are after.
You can manage it with the html code, otherwise use ul and li it's much more convenient.
<table>
<tr>
<td>
<p>123.44</p>
</td>
</tr>
<tr>
<td>
<p>12312.49</p>
</td>
</tr>
<tr>
<td>
<p> -------- </p>
</td>
</tr>
<tr>
<td>
<p>12.12</p>
</td>
</tr>
<tr>
<td>
<p>1231.44</p>
</td>
</tr>
<tr>
<td>
<p> ======== </p>
</td>
</tr>
<tr>
<td>
<p> 1234.33 </p>
</td>
</tr>
</table>
HTML markup:
<table class='cardc'>
<tr>
<td rowspan='5' width='10%'>
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>
<td width='70%' colspan='3'>"
."<a href='".$profilePage."&sid=".$sfid."#box-one'>".($record->fields->FirstName)." ".($record->fields->LastName)."</a></font>
</td>
<td>
".$record->fields->Email."
</td>
</tr>
<tr>
<td class='greyF' colspan='3'>
".$record->fields->Country_of_Citizenship__c."
</td>
</tr>
<tr>
<td>
<div class='greyF'>year</div>".$record->fields->Fellowship_year__c."
</td>
<td>
<div class='greyF'>Organization</div>".$record->fields->Partner_Organization__c."
</td>
<td>
<div class='greyF'>Country</div>".$record->fields->Fellowship_Country__c."
</td>
</tr>
<tr>
<td colspan='3'>
<div class='greyF'>Education</div>".$record->fields->Education__c."
</td>
</tr>
<tr>
</tr>
</table>
CSS markup:
.cardc {
border: 5px outset white;
padding: 3px;
width:80%;
}
But as the title says, I'm having cross Browser issues, the border that's supposed to cover the whole table gets cut off at the bottom.
Any recommendations for alternative ways to create the border?
Edited HTML taking everybody's worries into consideration. Border still draws improperly.
See a demo here
It's caused by a combination of an invalid rowspan and border collapsing (which is the default when you select "Normalized CSS" in jsFiddle). If you turn that off or provide the correct number of rows then the border draws correctly.
<td rowspan='5' width=10%> indicates that there are at least 4 following rows, since the current cell shall span 5 rows. Since you don't provide any of those rows the <td> will spill out of the table. Drop the rowspan attribute:
<td style="width:10%">
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>
You have a rowspan="5" on the first td which is breaking the bottom border of the table, probably because it cannot find the remaining 4 rows to merge with. Removing the rowspan fixes the border.
http://jsfiddle.net/Q3e9m/
Try fixing the errors with html in your code, for starters. Your code lacks some quotation marks, and styling attributes in tags are deprecated.
<html>
<head>
<style>
.cardc {
border: 5px outset white;
padding: 3px;
width:80%;
}
</style>
</head>
<body>
<table class='cardc' style="height:100px;">
<tr>
<td style="width:10%">
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' style="height:120px;width:100px;"/>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</body>
Lack of quotation marks and units.you need to specify whether your values are in pixels or ems ....try and use color coding codes, eg #fff or rgb(255 255 255) instead of of saying white.