wilsjd wilsjd - 25 days ago 8
CSS Question

How do I highlight an HTML table column with Bootstrap

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

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/

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>
Comments