Jak mogę zaznaczyć kolumnę tabeli HTML z Bootstrap

Question

używam bootstrap i stworzyliśmy tabelę, w której potrzeba I kolumny zgrupowane razem. Czy istnieją opcje bootstrap, których mogę użyć? Jestem gotów napisać własny kod CSS, aby to zrobić, ale wolałbym nie, jeśli jest na to wbudowany sposób bootstrap.

Na przykład w poniższej tabeli chciałbym, aby kolumny Current miały jedno kolorowe tło, a kolumny New - inne.

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: udało mi się osiągnąć coś, co szukam użyciu colgroup i, niestety, niestandardowy CSS (choć nie bardzo): http://jsfiddle.net/75v7W/4/

Answer 1

udało mi się osiągnąć coś tego, czego szukam, używając colgroup i, niestety, niestandardowego CSS (choć niezbyt dużo): http://jsfiddle.net/75v7W/4/

Uwaga: dla background-color s poniżej, wyciągnąłem z sukcesu, błąd, itp z domyślnych kolorów w bootstrap.css. Jeśli dostosowałeś swoje pliki bootstrap.css, te kolory mogą nie działać.

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; 

TABELA

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

Answer 2

Lepiej jest, jeśli jest to możliwe, należy używać bootstrap wbudowany klas CSS.

Tam jest wbudowany w sposób hightlight do kolumny: https://jsfiddle.net/DanielKis/wp6bt229/

HTML:

<table class="table table-condensed"> 
    <colgroup> 
    <col class="bg-success"></col> 
    <col span="2" class="bg-info"></col> 
    <col span="2" class="bg-danger"></col> 
    </colgroup> 
    <thead> 
    <tr> 
     <td></td> 
     <td colspan="2" class="text-center bg-primary">Current</td> 
     <td colspan="2" class="text-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>Johnny</td> 
     <td>English</td> 
     <td>Bud</td> 
     <td>Spencer</td> 
    </tr> 
    </tbody> 
</table> 

Można użyć

• bg-primary
• bg-success
• bg-info
• bg-warning
• bg-danger

klas CSS do kolorowania kolumn, komórek itd