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;
}
Related
I'm working on learning HTML, CSS, and JS on the side, but started messing around with making a new email signature at work and am running into an issue I'm hoping someone can help me out with.
What I'm hoping for:
What I'm getting: https://codepen.io/spacemanspiff_/pen/GRQzwQa
.verticalLine {
border-left: 15px solid #00205b;
height: 500px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 0px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
.container {
display: inline-flex;
}
.table1 {
margin-right: 20px;
}
body {
margin: 0;
font-family: "Fira Sans", ariel;
}
p {
white-space: nowrap;
}
<body>
<div class="container">
<table class="table1">
<tbody>
<tr>
<td><img src="ProfilePic.png" width="344" height="344" alt="profile phoot"></td>
<td rowspan="2">
<div class="verticalLine"></div>
</td>
</tr>
<tr>
<td align="center"><img src="LogoPlaceHolder.png" width="240" alt="korhorn financial group logo"></td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr>
<td>
<p style="font-size: 75px; color: #00205b;">Employee Name</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px; font-weight: 200;">Employee Role</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>e.</strong>  email#address.com</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>p.</strong>  111-222-3333</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>w.</strong>  www.website.com</p>
</td>
</tr>
<tr>
<td><img src="mapPin.png" width="45px" height="45px">   <img src="yt.png" width="45px" height="45px">   <img src="facebook.png" width="45px" height="45px">   <img src="Instagram.png" width="45px" height="45px">   
<img
src="Twitter.png" width="45px" height="45px"></td>
</tr>
</tbody>
</table>
</div>
</body>
I hate drag on about the things I've tried because I imagine you'll see it my code, but essentially what I was thinking I needed to do was put two tables inline. On the left would be the employee's profile pic and the logo below it, and a blue bar in the next column. In the second table would be the employee details and any appropriate links. What I'm getting is the rows in the 2nd table are ending up much larger than I want them, and I'm just not understanding why.
I guess what I was hoping for with the two tables was the ability to keep the information on the 2nd table tighter together, while allowing the info in the 1st table to span multiple rows. This could be the wrong approach altogether, so I'm open to any suggestions!
Thanks for the help!
Do you know how to inspect a document with your browser? Doing so shows that your paragraphs have a default size, mainly due to line height and margin, that is dramatically larger than the text itself.
Either don't use paragraphs or set their line height to zero or another small value and reduce margin. You'll then need to adjust margin on nearby elements to space them back out as needed.
.verticalLine {
border-left: 15px solid #00205b;
height: 500px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 0px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
.container {
display: inline-flex;
}
.table1 {
margin-right: 20px;
}
body {
margin: 0;
font-family: "Fira Sans", ariel;
}
p {
white-space: nowrap;
line-height: 0;
margin: 5px;
}
<body>
<div class="container">
<table class="table1">
<tbody>
<tr>
<td><img src="ProfilePic.png" width="344" height="344" alt="profile phoot"></td>
<td rowspan="2">
<div class="verticalLine"></div>
</td>
</tr>
<tr>
<td align="center"><img src="LogoPlaceHolder.png" width="240" alt="korhorn financial group logo"></td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr>
<td>
<p style="font-size: 75px; color: #00205b;">Employee Name</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px; font-weight: 200;">Employee Role</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>e.</strong>  email#address.com</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>p.</strong>  111-222-3333</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>w.</strong>  www.website.com</p>
</td>
</tr>
<tr>
<td><img src="mapPin.png" width="45px" height="45px">   <img src="yt.png" width="45px" height="45px">   <img src="facebook.png" width="45px" height="45px">   <img src="Instagram.png" width="45px" height="45px">   
<img src="Twitter.png" width="45px" height="45px"></td>
</tr>
</tbody>
</table>
</div>
</body>
I have a problem.
I'm using Node.JS nodemailer.
const url = `${url}`;
var mailOptions = {
from: 'stackoverflow',
to: email,
subject: 'test',
html: 'Please click this email to confirm your email: ${url}`'
};
The HTML is quite long. So I would have to link each line with
'Line1' +
'Line2' +
and unfortunately the uplines are shown an error see: align = 'center'
Is there a way to embed this HTML file simply and easily?
And if I can include the file separately I have created a variable and this should then be displayed in HTML. How would that work?
Can I somehow embed the file differently than directly in the code? I appreciate help!
This is my html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[SUBJECT]</title>
<style type="text/css">
body {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin:0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
.tableContent img {
border: 0 !important;
display: block !important;
outline: none !important;
}
a{
color:#382F2E;
}
p, h1{
color:#382F2E;
margin:0;
}
p{
text-align:left;
color:#999999;
font-size:14px;
font-weight:normal;
line-height:19px;
}
a.link1{
color:#382F2E;
}
a.link2{
font-size:16px;
text-decoration:none;
color:#ffffff;
}
h2{
text-align:left;
color:#222222;
font-size:19px;
font-weight:normal;
}
div,p,ul,h1{
margin:0;
}
.bgBody{
background: #ffffff;
}
.bgItem{
background: #ffffff;
}
#media only screen and (max-width:480px)
{
table[class="MainContainer"], td[class="cell"]
{
width: 100% !important;
height:auto !important;
}
td[class="specbundle"]
{
width:100% !important;
float:left !important;
font-size:13px !important;
line-height:17px !important;
display:block !important;
padding-bottom:15px !important;
}
td[class="spechide"]
{
display:none !important;
}
img[class="banner"]
{
width: 100% !important;
height: auto !important;
}
td[class="left_pad"]
{
padding-left:15px !important;
padding-right:15px !important;
}
}
#media only screen and (max-width:540px)
{
table[class="MainContainer"], td[class="cell"]
{
width: 100% !important;
height:auto !important;
}
td[class="specbundle"]
{
width:100% !important;
float:left !important;
font-size:13px !important;
line-height:17px !important;
display:block !important;
padding-bottom:15px !important;
}
td[class="spechide"]
{
display:none !important;
}
img[class="banner"]
{
width: 100% !important;
height: auto !important;
}
.font {
font-size:18px !important;
line-height:22px !important;
}
.font1 {
font-size:18px !important;
line-height:22px !important;
}
}
</style>
<script type="colorScheme" class="swatch active">
{
"name":"Default",
"bgBody":"ffffff",
"link":"382F2E",
"color":"999999",
"bgItem":"ffffff",
"title":"222222"
}
</script>
</head>
<body paddingwidth="0" paddingheight="0" style="padding-top: 0; padding-bottom: 0; padding-top: 0; padding-bottom: 0; background-repeat: repeat; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;" offset="0" toppadding="0" leftpadding="0">
<table bgcolor="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0" class="tableContent" align="center" style='font-family:Helvetica, Arial,serif;'>
<tbody>
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="MainContainer">
<tbody>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="40"> </td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<!-- =============================== Header ====================================== -->
<tr>
<td height='75' class="spechide"></td>
<!-- =============================== Body ====================================== -->
</tr>
<tr>
<td class='movableContentContainer ' valign='top'>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="35"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" align="center" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<p style='text-align:center;margin:0;font-family:Georgia,Time,sans-serif;font-size:26px;color:#222222;'><span class="specbundle2"><span class="font1">Welcome to </span></span></p>
</div>
</div></td>
<td valign="top" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<p style='text-align:center;margin:0;font-family:Georgia,Time,sans-serif;font-size:26px;color:#DC2828;'><span class="font">[CLIENTS.COMPANY_NAME]</span> </p>
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign='top' align='center'>
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<img src="images/line.png" width='251' height='43' alt='' data-default="placeholder" data-max-width="560">
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td height='55'></td></tr>
<tr>
<td align='left'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<h2 >Will this be your welcome email?</h2>
</div>
</div>
</td>
</tr>
<tr><td height='15'> </td></tr>
<tr>
<td align='left'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<p >
Here’s what you can say: Thanks again for signing up to the newsletter! You’re all set up, and will be getting the emails once per week. Meanwhile, you can check out our <a target='_blank' href='#' class='link1' >Getting Started</a> section to get the most out of your new account.
<br>
<br>
Have questions? Get in touch with us via Facebook or Twitter, or email our support team.
<br>
<br>
Cheers,
<br>
<span style='color:#222222;'>Peter Parker</span>
</p>
</div>
</div>
</td>
</tr>
<tr><td height='55'></td></tr>
<tr>
<td align='center'>
<table>
<tr>
<td align='center' bgcolor='#1A54BA' style='background:#DC2828; padding:15px 18px;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<a target='_blank' href='#' class='link2' style='color:#ffffff;'>Activate your Account</a>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height='20'></td></tr>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height='65'>
</tr>
<tr>
<td style='border-bottom:1px solid #DDDDDD;'></td>
</tr>
<tr><td height='25'></td></tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<p style='text-align:left;color:#CCCCCC;font-size:12px;font-weight:normal;line-height:20px;'>
<span style='font-weight:bold;'>[CLIENTS.COMPANY_NAME]</span>
<br>
[CLIENTS.ADDRESS]
<br>
<a target='_blank' href="[FORWARD]">Forward to a friend</a><br>
<a target="_blank" class='link1' class='color:#382F2E;' href="[UNSUBSCRIBE]">Unsubscribe</a>
<br>
<a target='_blank' class='link1' class='color:#382F2E;' href="[SHOWEMAIL]">Show this email in your browser</a>
</p>
</div>
</div></td>
<td valign="top" width="30" class="specbundle"> </td>
<td valign="top" class="specbundle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign='top' width='52'>
<div class="contentEditableContainer contentFacebookEditable">
<div class="contentEditable">
<a target='_blank' href="#"><img src="images/facebook.png" width='52' height='53' alt='facebook icon' data-default="placeholder" data-max-width="52" data-customIcon="true"></a>
</div>
</div>
</td>
<td valign="top" width="16"> </td>
<td valign='top' width='52'>
<div class="contentEditableContainer contentTwitterEditable">
<div class="contentEditable">
<a target='_blank' href="#"><img src="images/twitter.png" width='52' height='53' alt='twitter icon' data-default="placeholder" data-max-width="52" data-customIcon="true"></a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td height='88'></td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="40"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You could simply keep your template-html in a file and use an arbitrary js-templating library (e.g. ejs) to parse the template data and render its html. Something like this should help you get started:
In your app.js do the following:
const fs = require('fs');
const eis = require('ejs');
const template = fs.readFileSync("/path/to/your/template.ejs");
const templateData = { url: `${url}`, otherDataYouNeedToSetInTemplate: "here" };
const renderedHtml = ejs.render(template, templateData};
const mailOptions = {
from: 'stackoverflow',
to: email,
subject: 'test',
html: renderedHtml
};
Then in your template.ejs you can access the properties from templateData and set its values in the html:
<!DOCTYPE html>
<html>
....
Please click this email to confirm your email: <%= url %>`
....
</html>
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'm currently building an email signature, a simple 4 images sectioned off in a square 2x2 table.
The problem I'm currently facing is I can't remove the spacing between the td's at the moment.
<style>
d, tr, img { padding: 0px; margin: 0px; border: none; display: block; }
table { border-collapse: collapse; }
</style>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="http://bubblei.co.uk/NDz2UL.png" ></img>
</td>
<td>
<img src="http://bubblei.co.uk/BMSIqd.png"></img>
</td>
</tr>
<td>
<img src="http://bubblei.co.uk/VcOrDE.png" ></img>
</td>
<td>
<img src="http://bubblei.co.uk/DlwKjq.png"></img>
</td>
</tr>
</table>
Can anyone tell me where I'm going wrong, or point me in the right direction? much appreciated!
Your images all have different size. I've taken the liberty to smoothly change one of them, and the result is already way better. You should align them and honer the same dimensions on all images.
<style>
d, tr, img { padding: 0px; margin: 0px; border: none; display: block; }
table { border-collapse: collapse; }
</style>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="http://i.imgur.com/tBrf7Fu.png" >
</td>
<td>
<img src="http://bubblei.co.uk/BMSIqd.png">
</td>
</tr>
<td>
<img src="http://bubblei.co.uk/VcOrDE.png" >
</td>
<td>
<img src="http://bubblei.co.uk/DlwKjq.png">
</td>
</tr>
</table>
I'm trying to select the 5% tr, but my css selector does not seem to work. I also have to write one for the 10% tr, which I expect will be simple after the 5% tr is solved. My selector seems to work down to table, but I cannot get it to select the second tr. What am I doing wrong?
Code:
body > form > div > table > tr:nth-child(2) > td:first-child {
background-color: red
}
<form method="post">
<div>
<table cellpadding="0" align="center" cellspacing="0" border="0">
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td style="width: 5%">
5%
</td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%; border-color: #e0e0e0;">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td width="10%" valign="top" style="height: 100%;">10%</td>
<td valign="top" width="90%">
My Content
</td>
</tr>
</table>
</tr>
</table>
</div>
</form>
If you do NOT want to change with your HTML markup, meaning adding classes (which would be easier to target the TR and TD) you can use :nth-of-type
Snippet
tr:nth-of-type(2) {
background: red
}
table table tr:nth-of-type(2) td:first-of-type{
background: lightblue
}
<table cellpadding="0" align="center" cellspacing="0" border="0">
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td style="width: 5%">
5%
</td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%; border-color: #e0e0e0;">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td width="10%" valign="top" style="height: 100%;">10%</td>
<td valign="top" width="90%">
My Content
</td>
</tr>
</table>
</tr>
</table>
Target with following CSS:
tr[width="10%"]{
}
Give it a class so you can select it directly, without having to specify the entire chain:
<tr class="my-tr">
<td style="width: 5%">
....
</tr>
Then you can select it in css:
.my-tr {
background-color:red;
}
Use nth-of-type pseudo selectors. The nested table was tricky, I used td > table to find it. Your 1st target is background: red and 2nd target is outline:2px solid yellow
table {
outline: 3px dashed blue;
table-layout: fixed;
}
table:first-of-type {
background: rgba(0, 0, 0, .3);
}
/* 1st target acquired */
table:first-of-type tr:nth-of-type(2) td:first-of-type {
background: red;
}
form > div {
height: 50vh;
width: 90vw;
outline: 1px solid black;
}
td > table {
outline: 1px solid lime;
}
/* 2nd target acquired */
td > table tr:nth-of-type(2) td:first-of-type {
outline: 2px solid yellow;
}
<html>
<head>
<title>TestPage</title>
<style type="text/css">
/*body > form > div > table:first-of-type > tr:nth-child(2) > td:first-child { background-color:red };*/
</style>
</head>
<body>
<form method="post">
<div>
<table cellpadding="0" align="center" cellspacing="0" border="0">
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td style="width: 5%">
5%
</td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%; border-color: #e0e0e0;">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td width="10%" valign="top" style="height: 100%;">10%</td>
<td valign="top" width="90%">
My Content
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>