There should be a good way to alternate table row background colors based on class. Currently, I'm just doing something like this:
/* Staff Table */
table#user_provisioning .bpink { background-color: lavenderblush; }
table#user_provisioning .fred { color: red; }
table#user_provisioning tr.Administrators, tr.ProfessionalStaff { background-color: honeydew; }
table#user_provisioning tr.Deans, tr.SupportStaff { background-color: white; }
table#user_provisioning td { text-align: left; }
I would think there's a way to do something like:
table#user_provisioning tr.{foreach class}:nth-child(odd) { background-color: honeydew; }
Unfortunately, I'm not sure how to include all tr classes for the table and go even/odd based on that.
Suggestions?
Edit: Adding snipped/edited page code
table#table_organization tr.unsure,
tr.dept,
tr.org {
background-color: honeydew;
}
table#table_organization tr.board,
tr.prog,
tr.ssa {
background-color: white;
}
<section>
<h1> Organization </h1>
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="unsure">
<td> - </td>
</tr>
<tr class="board">
<td> Board </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
</table>
</section>
Unfortunately CSS does not have a :nth-of-class
pseudo selector. As long as the number of rows is very limited, using the adjacent sibling selector +
could help (showing only for .dept
):
.dept {
background: yellow;
}
.dept+.dept {
background-color: orange;
}
.dept+.dept+.dept {
background-color: red;
}
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
</table>