Làm cách nào để tô sáng cột bảng HTML với Bootstrap

Question

Tôi đang sử dụng bootstrap và đã tạo một bảng mà trong đó tôi cần các cột được nhóm lại với nhau. Có bất kỳ tùy chọn bootstrap nào mà tôi có thể sử dụng không? Tôi sẵn sàng để viết CSS của riêng tôi để làm điều đó, nhưng tôi không muốn nếu có một cách xây dựng trong bootstrap để làm điều đó.

Ví dụ: trong bảng bên dưới, tôi muốn các cột Current có một nền màu và các cột New để có cột khác.

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> 

CẬP NHẬT: Tôi đã đạt được một cái gì đó về những gì tôi đang tìm kiếm sử dụng colgroup và, than ôi, tùy chỉnh CSS (mặc dù không phải là rất nhiều): http://jsfiddle.net/75v7W/4/

Answer 1

tôi đã đạt được một cái gì đó về những gì tôi đang tìm kiếm bằng cách sử dụng colgroup và, than ôi, CSS tùy chỉnh (mặc dù không phải là rất nhiều): http://jsfiddle.net/75v7W/4/

Lưu ý: Đối với background-color s dưới đây, tôi kéo từ sự thành công, lỗi, vv từ màu sắc mặc định trong bootstrap.css. Nếu bạn đã tùy chỉnh bootstrap.css, những màu cụ thể này có thể không hoạt động cho bạn.

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> 

Answer 2

Nó là tốt hơn, nếu nó có thể sử dụng bootstrap xây dựng trong các lớp css.

Có được tích hợp sẵn trong cách để làm nổi bật một cột: 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> 

Bạn có thể sử dụng

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

lớp Css để tô màu cho các cột của bạn, các tế bào vv