Avatar of Erin Leale
Erin Leale
Flag for United States of America asked on

HTML nth-child - Need help on where to add in code....

In HTML - I need to format a table to highlight every other row.  I have tried adding tr:nth-child(even) but I don't think I'm adding it in the correct area of the style.  Any help is appreciated.  Thank you! 


<html>
<style> .ks-repeat {background-color: #FFFF66;}    
</style>
<style type="text/css">caption.AcctgTableFormat
{
background-color: #f9fafd;
color:black;
border-style:solid;
border-width:1px;
border-color:#8c756a;
text-align:center;

}
table.AcctgTableFormat
{
font-family:Tahoma;
border-collapse:collapse;
font-size:10pt;
background-color:#ddf4ff;
border-style:solid;
border-color:#3e4560;
border-width:1px;
}
th.AcctgTableFormat
{
font-size:10pt;
color:Black;
border-style:solid;
border-color:#3e4560;
border-width:1px;
text-align:center;
font-weight:bold;
}
tr.AcctgTableFormat
{
}
td.AcctgTableFormat
{
font-size:10pt;
background-color: white;
color:black;
border-style:solid;
border-width:1px;
border-color: #3e4560;
text-align:left;
padding:3px;

}
</style>
<table class="AcctgTableFormat k-table" style="width:1010.39px;">
<caption class="AcctgTableFormat">
</caption>
<thead>
<tr class="AcctgTableFormat">
<th class="AcctgTableFormat" data-role="resizable" style="width:50px;">Customer No
</th>
<th class="AcctgTableFormat" data-role="resizable" style="width:100px;">Customer Name
</th>
<th class="AcctgTableFormat" data-role="resizable" style="width:20px;">Type
</th>
<th class="AcctgTableFormat" style="width:100px;" data-role="resizable">Balance
</th>
</tr>
</thead>

 <tbody class="ks-repeat"><!--BEGIN*REPEAT-->
<tr class="AcctgTableFormat">
<td class="AcctgTableFormat" style="width:50px;">{CustomerNo}
</td>
<td class="AcctgTableFormat" style="width:100px;">{CustomerName}
</td>
<td class="AcctgTableFormat" style="width:20px;">{CustomerType}
</td>
<td class="AcctgTableFormat" style="width:100px;text-align:right;">{CurrentBalance$}
</td>
</tr>
<!--END*REPEAT--></tbody>
</tbody>
</tbody>
</tbody>
</tbody>

</tbody>
</table>
</html>

HTML

Avatar of undefined
Last Comment
Erin Leale

8/22/2022 - Mon
Scott Fell

Try this

https://jsbin.com/tenuhufowa/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<html>

<style type="text/css">
 
 
 
tr:nth-child(even) {background: #CCC;}
tr:nth-child(odd) {background: #FFF;}
 
</style>
<table class="AcctgTableFormat k-table" style="width:1010.39px;">
<caption class="AcctgTableFormat">
</caption>
<thead>
<tr class="AcctgTableFormat">
<th class="AcctgTableFormat" data-role="resizable" style="width:50px;">Customer No
</th>
<th class="AcctgTableFormat" data-role="resizable" style="width:100px;">Customer Name
</th>
<th class="AcctgTableFormat" data-role="resizable" style="width:20px;">Type
</th>
<th class="AcctgTableFormat" style="width:100px;" data-role="resizable">Balance
</th>
</tr>
</thead>


 <tbody class="ks-repeat">
   
   <!--BEGIN*REPEAT-->
<tr class="AcctgTableFormat">
<td class="AcctgTableFormat" style="width:50px;">{CustomerNo}
</td>
<td class="AcctgTableFormat" style="width:100px;">{CustomerName}
</td>
<td class="AcctgTableFormat" style="width:20px;">{CustomerType}
</td>
<td class="AcctgTableFormat" style="width:100px;text-align:right;">{CurrentBalance$}
</td>
</tr>
<!--END*REPEAT-->
   
     <!--BEGIN*REPEAT-->
<tr class="AcctgTableFormat">
<td class="AcctgTableFormat" style="width:50px;">{CustomerNo}
</td>
<td class="AcctgTableFormat" style="width:100px;">{CustomerName}
</td>
<td class="AcctgTableFormat" style="width:20px;">{CustomerType}
</td>
<td class="AcctgTableFormat" style="width:100px;text-align:right;">{CurrentBalance$}
</td>
</tr>
<!--END*REPEAT-->
   
     <!--BEGIN*REPEAT-->
<tr class="AcctgTableFormat">
<td class="AcctgTableFormat" style="width:50px;">{CustomerNo}
</td>
<td class="AcctgTableFormat" style="width:100px;">{CustomerName}
</td>
<td class="AcctgTableFormat" style="width:20px;">{CustomerType}
</td>
<td class="AcctgTableFormat" style="width:100px;text-align:right;">{CurrentBalance$}
</td>
</tr>
<!--END*REPEAT-->
   
     <!--BEGIN*REPEAT-->
<tr class="AcctgTableFormat">
<td class="AcctgTableFormat" style="width:50px;">{CustomerNo}
</td>
<td class="AcctgTableFormat" style="width:100px;">{CustomerName}
</td>
<td class="AcctgTableFormat" style="width:20px;">{CustomerType}
</td>
<td class="AcctgTableFormat" style="width:100px;text-align:right;">{CurrentBalance$}
</td>
</tr>
<!--END*REPEAT-->
 
 
  </tbody>
</tbody>
</tbody>
</tbody>
</tbody>


</tbody>
</table>
</html>
</body>
</html>

Open in new window

Scott Fell

Are you using kendo?
Erin Leale

ASKER
Hi Scott,

I tried this and the program I'm using - Knowledgesync - keeps adding the a line for .ks-repeat....


<html>
<style> .ks-repeat {background-color: #FFFF66;}
tr:nth-child(even) {background: #CCC;}
tr:nth-child(odd) {background: #FFF;}
</style>
<style type="text/css">caption.AcctgTableFormat
{
background-color: #f9fafd;
color:black;
border-style:solid;

I thing that is over writing the tr: command....  

Thanks. 
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Scott Fell

try


tr.AcctgTableFormat:nth-child(even) {background: #CCC!important;}
tr.AcctgTableFormat:nth-child(odd) {background: #FFF!important;}

Open in new window

Erin Leale

ASKER
Hi Scott,

I added the code above here and it still doesn't change the background.  I may need to start from scratch and build the table with the wizard provided in the software....  

<html>
<style> .ks-repeat {background-color: #FFFF66;}   .ks-repeat {background-color: #FFFF66;}
tr.AcctgTableFormat:nth-child(even) {background: #CCC!important;}
tr.AcctgTableFormat:nth-child(odd) {background: #FFF!important;}
</style>
<style type="text/css">caption.AcctgTableFormat
{
background-color: #f9fafd;
color:black;
border-style:solid;
border-width:1px;
border-color:#8c756a;
text-align:center;


ASKER CERTIFIED SOLUTION
Scott Fell

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Erin Leale

ASKER
I added that piece of code and it still didn't change.  



I went into the program and viewed the result outside of the email program.  It is working with the shading just not going through our email.  Not sure why, I will have to research with the software company.

Thank you Scott for your assistance. 
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.