Twitter Bootstrap không thay đổi màu của hàng tiêu đề bảng màu trong khi sử dụng <th> thay vì <td>

Question

Trong ứng dụng đường ray 3.2 của tôi, tôi phải hiển thị một bảng. Vì vậy, tôi đã sử dụng lớp học của twitter bootstrap "table table-giáp" để định dạng nó. Và sau đó thay đổi màu sắc của hàng, tôi cũng sử dụng lớp "thông tin" và "thành công" được mô tả here.

Mã bảng trong trang của tôi là như sau: -

<table class="table table-bordered"> 
    <tr class="info"> 
    <th>Your Links</th> 
    <th></th> 
    <th></th> 
    <th></th> 
    </tr> 

<% @links.each do |link| %> 
    <tr class="success"> 
    <td><%= link_to linkbunch_url(link.link), linkbunch_url(link.link) %></td> 
    <td><%= link_to 'Show', linkbunch_url(link.link) %></td> 
    <td><%= link_to 'Edit', edit_url(link.link) %></td> 
    <td><%= link_to 'Destroy', destroy_url(link.link), method: :delete, data: { confirm: 'Are you sure ?' } %></td> 
    </tr> 
<% end %> 
</table> 

Đoán những gì nó đang thay đổi tất cả các hàng màu sắc ngoại trừ dòng đầu tiên đó là hàng đầu bàn. Nhưng khi thay đổi "" thành "" thì nó hoạt động tốt. Nhưng bởi vì nó chỉ là một hàng đơn giản không phải là một hàng tiêu đề bảng nên phông chữ của nó không phải là loại đậm.

Vậy Cách thay đổi màu của hàng tiêu đề mà không sử dụng thay vì ??

Thanks ...

Answer 1

Không có css trong bootstrap để thêm .info hoặc .success vào tiêu đề bảng. Bạn phải tự mình thực hiện quy tắc.

.table tbody tr.info th { 
    background-color: #d9edf7; 
} 

jsfiddle

Answer 2

<table class="table table-bordered"> 
    <thead> 
    <tr class="info"> 
     <th>Your Links</th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
<% @links.each do |link| %> 
    <tr class="success"> 
    <td><%= link_to linkbunch_url(link.link), linkbunch_url(link.link) %></td> 
    <td><%= link_to 'Show', linkbunch_url(link.link) %></td> 
    <td><%= link_to 'Edit', edit_url(link.link) %></td> 
    <td><%= link_to 'Destroy', destroy_url(link.link), method: :delete, data: { confirm: 'Are you sure ?' } %></td> 
    </tr> 
<% end %> 
    </tbody> 
</table>