How can I have two rows in my table that span multiple columns, while still being compatible with bootstrap?

Question

I'm using bootstrap with my web application. I'm trying to get a table design layout to work while still being able to use bootstrap's table-striped class. Currently I'm using the following:

<table>   <thead>     <th>ID</th>     <th>Name</th>     <th>Department</th>     <th>Started</th>   </thead>   <tbody>     <tr>       <td>6</td>       <td>          <div>John Doe</div>          <div>12 Sales Total; 4 March, 3 April, 12 July, 14 August</div>       </td>       <td>Sales</td>       <td>Feb. 12th 2010</td>     </tr>   </tbody> </table> 

However, I'm wanting the 12 Sales Total; 4 March, 3 April, 12 July, 14 August of the table to appear below John Doe Sales Feb. 12th 2010 and not wrap within the column it's in now. If I use two separate <tr> elements to get the layout to work then the table-striped no longer works properly.

Edit:

So here is the current setup. This gets what I want except for the issue where the text on the div doesn't span the other columns, and just wraps within the column it's currently in. https://jsfiddle.net/AkT6R/

I've tried something earlier that was mentioned in a submitted answer by @Bryce, but this isn't compatible with Bootstrap it seems. https://jsfiddle.net/AkT6R/1/

Answer 1

Like so. You need rowspan plus colspan:

<table border=1>   <thead>     <th>ID</th>     <th>Name</th>     <th>Department</th>     <th>Started</th>   </thead>   <tbody>     <tr>       <td rowspan=2>6</td>       <td>          <div>John Doe</div>       </td>       <td>Sales</td>       <td>Feb. 12th 2010</td>     </tr>     <tr>         <td colspan=3>          <div>12 Sales Total; 4 March, 3 April, 12 July, 14 August</div>         </td>     </tr>   </tbody> </table> 

See it in action at https://jsfiddle.net/brycenesbitt/QJ4m5/2/

---

Then for your CSS problem. Right click and "Inspect element" in Chrome. Your background color comes from bootstrap.min.css. This applies a color to even and odd rows:

.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { background-color: #f9f9f9; } 

Fiddle it appropriately for your double sized rows:

.table-striped>tbody>tr:nth-child(4n+1)>td, .table-striped>tbody>tr:nth-child(4n+2)>td {    background-color: #ff10ff; } .table-striped>tbody>tr:nth-child(4n+3)>td, .table-striped>tbody>tr:nth-child(4n+4)>td {    background-color: #00ffff; } 

Done.