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>
Related
I am trying to get the section status colors in the webgrid and divide it percentage wise but it is not working for some of the rows
The webgrid cshtml script for section status is written below.
webGrid.Column(header: "Section Status", format: #
<table class="" cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" width="#item.InProgressPC%" title="#item.InProgressPC%"></td>
<td id="respPendingwd" width="#item.ResponsePendingPC%" title="#item.ResponsePendingPC%"></td>
<td id="revPendingwd" width="#item.ReviewPendingPC%" title="#item.ReviewPendingPC%"></td>
<td id="acceptedwd" width="#item.AcceptedPC%" title="#item.AcceptedPC%"></td>
<td id="rejectedwd" width="#item.RejectedPC%" title="#item.RejectedPC%"></td>
<td id="ftReciverwd" width="#item.FwdToRecieverPC%" title="#item.FwdToRecieverPC%"></td>
</tr>
</tbody>
</table>
, style: "SectionStatus"),
The color should be shown in % wise and for zero % the color should not appear in the grid.As shown the image only 4 status color should appear as 4 have percentage values of 25. But 5 colors are showing up for the highlighted row
table-layout: fixed should fix your problem, however sometimes there still is a 1px wide cell if you use the html width attribute instead of css.
table {
table-layout: fixed;
}
tr > td#inProgresswd {
background: #faa;
}
tr > td#respPendingwd {
background: #afa;
}
tr > td#revPendingwd {
background: #aaf;
}
tr > td#acceptedwd {
background: #ffa;
}
tr > td#rejectedwd {
background: #aff;
}
tr > td#ftReciverwd {
background: #faf;
}
<table cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" width="25%" title="25%"></td>
<td id="respPendingwd" width="0%" title="0%"></td>
<td id="revPendingwd" width="0%" title="0%"></td>
<td id="acceptedwd" width="25%" title="25%"></td>
<td id="rejectedwd" width="25%" title="25%"></td>
<td id="ftReciverwd" width="25%" title="25%"></td>
</tr>
</tbody>
</table>
<br />
<table cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" style="width: 25%;" title="25%"></td>
<td id="respPendingwd" style="width: 0%;" title="0%"></td>
<td id="revPendingwd" style="width: 0%;" title="0%"></td>
<td id="acceptedwd" style="width: 25%;" title="25%"></td>
<td id="rejectedwd" style="width: 25%;" title="25%"></td>
<td id="ftReciverwd" style="width: 25%;" title="25%"></td>
</tr>
</tbody>
</table>
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>
I have the following 2x1 cell where I have an image in cell 1 and text in cell 2. I want rounded corners such as the examples found here. I used border-radius but I still have hard corners. I cannot use CSS as this is for a newsletter that will be emailed out. I appreciate any insight.
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150" style="border-width: 0px" src="http://www.path.com/to/image.png"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span style="font-family: trebuchet ms,verdana,arial,helvetica,sans-serif; font-size: 12px;">
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</table>
The issue is with border-collapse: collapse; you need to use the border-collapse: separate;
<html>
<head>
<style>
td > span {
font-family: trebuchet ms,verdana,arial,helvetica,sans-serif;
font-size: 12px;
}
td > img {
/* border-width: 0px; */
border-radius: 15px 0 0 50px;
}
body > table {
border-collapse: separate;
border-radius: 15px 50px;
border: 3px solid #000;
}
</style>
</head>
<body>
<table width="723" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150"src="http://via.placeholder.com/275x150"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span>
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
Results in:
You can see documentation about the different styles of border on tables at https://www.w3.org/TR/CSS21/tables.html#separated-borders and https://www.w3.org/TR/CSS21/tables.html#collapsing-borders. The snippet above should work in an email or as a stand alone page but would recommend separating the CSS for a standalone page.
Change your table tag from
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
to
<table border="3" width="723" cellspacing="0" cellpadding="0" >
And use this CSS
table {
border: 2px solid;
border-radius: 25px;
}
If you only want this rounded corner on the outer table, then give it an ID or a class and reference the new ID or class in the CSS instead of referencing all table elements.
I am trying to alternate table row colors by odd and even rows. Seems simple and it works fine in chrome but when I test in IE nothing changes. The weirdest thing is, it originally did work in IE, but suddenly stopped and I can't get it to work again. Here is the CSS I am using. Any ideas why this wouldn't be working?
.styleIntr {
white-space: nowrap;
margin-top: 5px;
background-color: #DFF0F9;
margin-bottom: 5px;
border: 1px solid #CCC;
height: 320px;
z-index: 1;
font-size: 9pt;
color: #000;
padding-left: 50px;
padding-right: 50px;
}
.styleIntr tr:nth-child(odd) td{
background: #DFF0F9;
}
.styleIntr tr:nth-child(even) td{
background: #EFF7FB;
}
here is the HTML:
<table class="styleIntr" border="0" cellpadding="3" cellspacing="1" rules="rows" frame="hsides" align="right"
width="10%">
<TBODY><TR>
<TD style="HEIGHT: 20px"><SPAN id=Label3>Time</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label4>Type</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label5>Type 1</SPAN> </TD></TR>
<TR>
<TD align=center style="HEIGHT: 20px">09:00 </TD>
<TD align=center style="HEIGHT: 20px">S </TD>
<TD align=center style="HEIGHT: 20px">B </TD></TR>
<TR>
<TD colSpan=3> </TD></TR>
</TBODY>
</table>
You can trying to alternate table row colors by odd and even rows but your style is incorrect you have add this css to rows td. so remove td like this
First Use this
<style>
.styleIntr tr:nth-child(odd){
background: #DFF0F9;
}
.styleIntr tr:nth-child(even){
background: #EFF7FB;
}
</style>
OR
If IE8 doesn't support the nth-child
use this code
<script>
$(document).ready(function() {
$(".styleIntr tr:nth-child(even)").addClass("even");
$(".styleIntr tr:nth-child(odd)").addClass("odd");
});
</script>
<style>
.styleIntr tr.odd{
background: #DFF0F9;
}
.styleIntr tr.even{
background: #EFF7FB;
}
</style>
you can check this fiddle.
https://jsfiddle.net/foku4qa3/
If IE does not support then use this one.
<table class="styleIntr" border="0" cellpadding="3" cellspacing="1" rules="rows" frame="hsides" align="right"
width="10%">
<TBODY><TR>
<TD style="HEIGHT: 20px"><SPAN id=Label3>Time</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label4>Type</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label5>Type 1</SPAN> </TD></TR>
<TR>
<TD align=center style="HEIGHT: 20px">09:00 </TD>
<TD align=center style="HEIGHT: 20px">S </TD>
<TD align=center style="HEIGHT: 20px">B </TD></TR>
<TR>
<TD colSpan=3> </TD></TR>
</TBODY>
</table>
<script>
$(document).ready(function() {
$(".styleIntr tr:odd").addClass("odd");
$(".styleIntr tr:even").addClass("even");
});
</script>
<style>
.styleIntr tr:nth-child(odd){
background: #DFF0F9;
}
.styleIntr tr:nth-child(even){
background: #EFF7FB;
}
.styleIntr tr.odd{
background: #DFF0F9;
}
.styleIntr tr.even{
background: #EFF7FB;
}
</style>
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;
}