I'm trying to make an html mail so I need to use inline CSS. The problem is that I can't figure out why the cell height I set doesn't display as I intended. I've set the % height of the cells like I would them to be, but the result isn't as I expected.
The code is this and as you can see the result is not like I intended because I've set 15% for the header but in the result is obviously not 15% and no matter the value it does not change the result. The same thing happens with the other td:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8">
<title></title>
</head>
<body>
<table style="table-layout:fixed; width:56%; height:100%;" border="1" bordercolor=black align=center>
<tr>
<th colspan="2" style="height:15%; width:100%;" >
<a href="http://www/">
<img src="D:\web_mail\EN_TW1-EE_3D-Logo.pn" width="56%" alt="Header"/> </a>
</th>
</tr>
<tr>
<td style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;" >
<img src="D:\web_mail\Halo_4_-_Master_Chief.pn" width="100%" alt="Patrik" />
</td>
<td style="border-left-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Alberta" />
</td>
</tr>
<tr>
<td colspan="2" style="height:60%; width:100%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Igor"/>
</td>
</tr>
<tr>
<th colspan="2" style="height:15%; width:100%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="56%" alt="Footer"/>
</th>
</tr>
</table>
</body>
</html>
I hope you can help me.
To have the image to stretch to the same height and width as the containing boxes, simply add a 100% width and a height equal to the row it is in:
http://jsfiddle.net/j2bcc24o/4/
If you just want the width, go for:
http://jsfiddle.net/j2bcc24o/3/
<td style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;">
<img src="image.png" width="100%" height="10%" alt="Patrik" />
</td>
And also don't forget to set html and body to 100% height and width as well as 0 padding and margin:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
i am not able to understand your problem properly,
assign class to td and set the height
<td class="classname">
</td>
.className{
height:20%;
background:red;
}
Try the below code
let me know if you need any help.
<html>
<head>
<style>
html,body{
height:100%;
margin:0 auto;
}
table{
table-layout:fixed;
width:56%;
height:100%;
border:1px solid #000;
text-align:center;
margin:0 auto;
}
table th{
height:15%;
width:100%;
}
.className{
height:20%;
background:red;
}
td{
height:50%;
border:1px solid #000;
background:#000;
width:100%;
}
</style>
</head>
<body>
<table >
<tr>
<th colspan="2" >
<img src="D:\web_mail\EN_TW1-EE_3D-Logo.pn" width="56%" alt="Header"/>
</th>
</tr>
<tr>
<td >
<img src="D:\web_mail\Halo_4_-_Master_Chief.pn" width="100%" alt="Patrik" />
</td>
<td >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Alberta" />
</td>
</tr>
<tr>
<td colspan="2" class="className" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Igor"/>
</td>
</tr>
<tr>
<th colspan="2" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="56%" alt="Footer"/>
</th>
</tr>
</table>
</body>
</html>
Defining height in percentage will not work with td/div, specially for the mailers, need to assign pixel values only.
Related
Here is the code for aligning contact details:
<html>
<body>
<table width="900" class="contact-details">
<tr>
<td><img src="./images/Mobile.png"></td>
<td>
<p>832.674.6834</p>
</td>
<td><img src="./images/fax.png"></td>
<td>
<p>271.217.4981</p>
</td>
<td><img src="./images/email.png"></td>
<td>
<p>test#testpineced.com</p>
</td>
<td><img src="./images/address.png"></td>
<td>
<p>1055 Loremips Tr. Kity, TX</p>
</td>
</tr>
</table>
<style>
img {
/* width: 100%; */
display: block;
}
</style>
</body>
</html>
You can see there is gap difference in between images and text content. Can you please help me to make equal gap difference and fit full content inside the table class.
Please see the screenshot attached: https://imgur.com/a/tjd9UOo
use css class for td and for each td can specify the inline width & height
.img {
background-repeat:no-repeat;
background-size: cover;
}
<table width="900" class="contact-details">
<tr>
<td style="background-image:url(./images/Mobile.png); width: 50px; height: 80px;"> </td>
<td><p>832.674.6834</p></td>
<td class="img" style="background-image:url(./images/fax.png); width: 50px; height: 80px;"> </td>
<td><p>271.217.4981</p></td>
<td class="img" style="background-image:url(./images/email.png); width: 50px; height: 80px;"> </td>
<td><p>test#testpineced.com</p></td>
<td class="img" style="background-image:url(./images/address.png); width: 50px; height: 80px;"> </td>
<td><p>1055 Loremips Tr. Kity, TX</p></td>
</tr>
</table>
<table width="900" class="contact-details" >
<tr>
<td style='width: 30px'><img style='width: 30px' src="./images/Mobile.png"></td>
<td>832.674.6834</td>
<td style='width: 30px'><img style='width: 30px' src="./images/fax.png"></td>
<td>271.217.4981</td>
<td style='width: 30px'><img style='width: 30px' src="./images/email.png"></td>
<td>test#testpineced.com</td>
<td style='width: 30px'><img style='width: 30px' src="./images/address.png"></td>
<td>1055 Loremips Tr. Kity, TX</td>
</tr>
just change the width px according to the image width
**You have to remove width="900" and add padding to <td> element**
<html>
<head>
<style>
img {
/* width: 100%; */
display: block;
}
table{
margin:0 auto;
}
td{
padding-top:5%;
padding-left: 1%;
}
</style>
</head>
<body>
<table class="contact-details">
<tr>
<td><img src="./images/Mobile.png"></td>
<td>
<p>832.674.6834</p>
</td>
<td><img src="./images/fax.png"></td>
<td>
<p>271.217.4981</p>
</td>
<td><img src="./images/email.png"></td>
<td>
<p>test#testpineced.com</p>
</td>
<td><img src="./images/address.png"></td>
<td>
<p>1055 Loremips Tr. Kity, TX</p>
</td>
</tr>
</table>
</body>
</html>
I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity
One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific
In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.
This question already has an answer here:
How to avoid White line between img and td bottom?
(1 answer)
Closed 6 years ago.
Here is the code:
Fiddle
I believe I have removed all spacing, but the td is still 305px and the img is 300px height.
Even if I try:
<td height="300">
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
or
<tr height="300">
On the containing <tr>.
This is completely ignored and the td stays at 305px?
because img is an inline element and has vertical-align:baseline therefore creates a gap.
So you either can:
display:block in img
or set
vertical-align:bottom
Also you don't need 2 styles tag, neither don't you need to duplicate the body rule with new properties, just put all in one body rule.
Note: careful if you are creating this for html-email, the CSS which is not inline (above body) some email clients such as gmail will strip it, make sure you put it all inline or you use some toll that will do that for you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battersea Studios</title>
<style type="text/css">
#outlook a {
padding: 0;
}
body {
width: 100% !important;
margin: 0;
padding: 0;
font-family: Arial;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
border: 0;
display: block
}
a {
border: 0;
}
hr {
width: 20px;
text-align: left
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" align="center" style="width:600px;font-size:20px">
<tr>
<td>
<table cellspacing="0" cellpadding="0" style="color:white;">
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#E66977;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>urtyryhry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
ryhryhjtyhjty
<br>tyjtyjtyjty
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color:#1EA553;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>F</strong>
</td>
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
rthrthrth
<br>ryhryhryht
<br>hryhryhryt
</td>
</tr>
</table>
</td>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
</tr>
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#EA752E;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>rtyryry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
rryu56u
<br>ryuryuy
<br>uryuryuyrt
<br>ytyutyuty
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
img is inline element and it takes few extra pixels on bottom by default. Use display: block for img to remove this space:
table img {
display: block;
}
I have a problem with Internet Explorer 9 and fixed height of a td
I need a td with 5px height but in IE9 its bigger than 5px.
In Chrome, Firefox and Safari it works
I tried with a transparent 1px gif to insert in the td, I set the font-size: 0px; line-height: 0px and it still won't work.
My test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.space{
height: 5px;
width: 5px;
font-size: 0px;
line-height: 0px;
background: none;
}
table{
border-spacing: 0px;
table-layout: fixed;
}
td{
background-color: red;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 1200px;">
<tr >
<td rowspan="5"> test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td rowspan="5"> test2<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td> test3</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
</table>
</body>
</html>
I have two images:
Chrome (working):
IE9:
You can place a div inside the td with a height of 5px. http://jsfiddle.net/aCrbz/3/
<td><div class="foo"></div></td>
The vertical scroll works, but the horizontal doesn't. My code:
<html >
<body >
<table style=" height:100%; width:100%">
<tr>
<td >
<div style=" overflow:scroll; height:100%; width:100%">
<table style=" width:2000px; height:2000px; ">
<tr><td></td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Table is not an ideal element to use unless u want to display a table/table of contents.
Always prefer divs than tables.
This should do inside ur <body>
<div style="height: 100%; width: 100%">
<div style="overflow: scroll; height: 100%; width: 100%">
<table style="width: 2000px; height: 2000px;">
<tr>
<td>
</td>
</tr>
</table>
</div>
With Table u will have to set table-layout:fixed ,
<table style="height: 100%; width: 100%; table-layout:fixed">
<tr>
<td>
<div style="overflow: scroll; height: 100%; width: 100%">
<table style="width: 2000px; height: 2000px;">
<tr>
<td style="width:50%; display:none">
</td>
<td style="width:50%; display:none">
</td>
</tr>
<tr>
<td>control here will auto-align to 50%</td>
<td>control here will auto-align to 50%</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
I have modified the td template. Please note that as well.
i changed your code like this
<html >
<body >
<table style=" height:100%; width:100%">
<tr>
<td >
<div style=" overflow:scroll; height:2000px; width:100%">
<table style=" width:2000px; height:2000px; overflow:scroll;">
<tr><td></td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
try this.it will work..