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">
<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>
</tbody>
</tbody>
</tbody>
</tbody>
</tbody>

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

HTML

Last Comment

Erin Leale

8/22/2022 - Mon

Scott Fell

12/27/2021

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

12/27/2021

Are you using kendo?

Erin Leale

12/27/2021

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

12/27/2021

try



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

Open in new window

Erin Leale

12/28/2021

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

12/28/2021

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

12/30/2021

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.