How do I highlight an HTML table column with Bootstrap

Question

I am using bootstrap and have created a table in which I need columns grouped together. Is there any bootstrap options that I can use? I am willing to write my own CSS to do it, but I would rather not if there is a built in bootstrap way to do it.

For example, in the table below I would want the Current columns with one color background and the New columns to have another.

http://jsfiddle.net/75v7W/

<table>     <thead>         <tr>             <td></td>             <td colspan="2" style="text-align: center;">Current</td>             <td colspan="2" style="text-align: center;">New</td>         </tr>         <tr>             <th>ID</th>             <th>First Name</th>             <th>Last Name</th>             <th>Fisrt Name</th>             <th>Last Name</th>         </tr>     </thead>     <tbody>         <tr>             <td>1</td>             <td>John</td>             <td>Bauer</td>             <td>Jack</td>             <td>Bauer</td>         </tr>     </tbody> </table> 

UPDATE: I have achieved something of what I am looking for using colgroup and, alas, custom CSS (though not very much) : http://jsfiddle.net/75v7W/4/

Answer 1

I achieved something of what I am looking for using colgroup and, alas, custom CSS (though not very much): http://jsfiddle.net/75v7W/4/

Note: For the background-colors below, I pulled from the success, error, etc. from the default colors in the bootstrap.css. If you have customized your bootstrap.css, these specific colors may not work for you.

CSS

colgroup col.success {   background-color: #dff0d8; } colgroup col.error {   background-color: #f2dede; } colgroup col.warning {   background-color: #fcf8e3; } colgroup col.info {   background-color: #d9edf7; }    

TABLE

<table class="table table-condensed">     <colgroup>         <col>         <col span="2" class="info">         <col span="2" class="success">     </colgroup>     <thead>         <tr>             <td></td>             <td colspan="2" style="text-align: center;">Current</td>             <td colspan="2" style="text-align: center;">New</td>         </tr>         <tr>             <th>ID</th>             <th>First Name</th>             <th>Last Name</th>             <th>Fisrt Name</th>             <th>Last Name</th>         </tr>     </thead>     <tbody>         <tr>             <td>1</td>             <td>John</td>             <td>Bauer</td>             <td>Jack</td>             <td>Bauer</td>         </tr>     </tbody> </table>