Forum Moderators: not2easy
In order to make the results more legible, I'm using an "alternate" class for the table rows (styling with a background colour).
Here is some sample markup:
<table id="subjects">
<th>Grade</th><th>Subject</th>
<tr class="alternate"><td>5</td><td>Geography</td></tr>
<tr class=""><td>5</td><td>History</td></tr>
<tr class="alternate"><td>6</td><td>Spanish</td></tr>
<tr class=""><td>6</td><td>English</td></tr>
</table>
I now want to group the table rows, and add another style (italics for example). I'm trying code like this:
<table id="subjects">
<th>Grade</th><th>Subject</th>
<div class="divalternate">
<tr class="alternate"><td>5</td><td>Geography</td></tr>
<tr class=""><td>5</td><td>History</td></tr>
</div>
<div class="divalternate">
<tr class="alternate"><td>6</td><td>Spanish</td></tr>
<tr class=""><td>6</td><td>English</td></tr>
</div>
</table>
I'm styling using:
.alternate {
background: #eee;
}
.divalternate {
font-style: italic;
}
The .alternate style applies to the <tr> tags, but I can't seem to get the grouping to work. I've tried with <div> and <span> tags.
I'd be grateful for any help.
Thanks, Nick.
With a little digging around, I found that there's already a table-row-group tag:
<tbody>. So, my code which now works looks like:
<table id="subjects">
<thead>
<th>Grade</th><th>Subject</th>
</thead>
<tbody class="group">
<tr class="alternate"><td>5</td><td>Geography</td></tr>
<tr class=""><td>5</td><td>History</td></tr>
</tbody>
<tbody class="">
<tr class="alternate"><td>6</td><td>Spanish</td></tr>
<tr class=""><td>6</td><td>English</td></tr>
</tbody>
</table>
and the css to render it is:
table tbody.group {
background: #eee;
}
table tbody tr.alternate {
font-weight: bold;
}