Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap - Table Striping with rowspan

I am trying to put together a table that uses the twitter bootstrap striping but I need it to NOT apply to "nested" rows. By that I mean I have table like this (striped cells marked with S):

------------------------------------------------------------------------
|     S      |      S       |       S       |     S      |      S      |
------------------------------------------------------------------------
|            |              |               |            |             |
|            |              ------------------------------             |
|            |              |       S       |     S      |             |
------------------------------------------------------------------------
|            |              |               |            |             |
------------------------------------------------------------------------

Because the second row here has cells with rowspan="2", the single row cells get the striping effect. To complicate this, the rows laid out like the 2nd row are conditional so I can't simply apply to striping to every 3rd row. Is there a way to get the striping to account for the rowspan?

like image 524
Marcus Turnbo Avatar asked Apr 07 '26 16:04

Marcus Turnbo


1 Answers

Add some empty table rows to avoid odd striping with bootstrap tables.

 <table class="table table-striped table-bordered">
     <tr>
        <th colspan="2" rowspan="3">header 1</th>
        <th>header 2</th>
     </tr>
     <tr>
     </tr>
     <tr>
        <th>sub header 1</th>
     </tr>
     <tr>
        <td>row 1 cell 1</>
        <td>row 1 cell 2</>
        <td>row 1 cell 3</>
     </tr>
     <tr>
        <td>row 2 cell 1</>
        <td>row 2 cell 2</>
        <td>row 2 cell 3</>
     </tr>
  </table>

Without the empty tr line the above would not start row 1 as striped, with the tr line row 1 striped as expected.

like image 111
flurdy Avatar answered Apr 10 '26 04:04

flurdy