Link to home
Start Free TrialLog in
Avatar of Erin Leale
Erin LealeFlag 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>

Avatar of Scott Fell
Scott Fell
Flag of United States of America image

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

Are you using kendo?
Avatar of 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. 
try


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

Open in new window

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
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I added that piece of code and it still didn't change.  

User generated image

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.