How can I show tr with same class in same tbody

Question

I have:

<tbody>
<tr class='default'></tr>
<tr class='sample'></tr>
<tr class='sample'></tr>
<tr class='sample'></tr>
<tr class='default'></tr>
</tbody>

All of the classes are coming from foreach loop in same sequence. Now I want to display tr with default class in separate tbody and tr with sample class in different tbody like below

 <tbody>
    <tr class='default'></tr>
    <tr class='default'></tr>
 </tbody>

 <tbody>
    <tr class='sample'></tr>
    <tr class='sample'></tr>
    <tr class='sample'></tr>
</tbody>

how can i do so?

Answer 1

you can define styles for the tbody's and have the tr's styled depending on their parent:

html:

<tbody class="default">
    <tr></tr>
    <tr></tr>
 </tbody>

 <tbody class="sample">
    <tr></tr>
    <tr></tr>
    <tr></tr>
</tbody>

style:

tbody.default tr { ... }
tbody.sample tr { ... }