2013-01-23 2 views
6

In meiner Rails 3.2 Anwendung muss ich eine Tabelle anzeigen. Also habe ich die Klasse "" von Twitter Bootstrap "table table-bordered" verwendet, um es zu formatieren. Und dann, um seine Zeilenfarbe zu ändern, habe ich auch Klasse "info" und "Erfolg" here beschrieben.Twitter Bootstrap ändert nicht die Farbe der Kopfzeile der Farbzeile bei der Verwendung von <th> anstelle von <td>

Der Tabellencode in meiner Seite ist wie folgt: -

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

Ratet mal, was es alle Zeilen Farben mit Ausnahme der ersten Zeile ändert sich, dass die die Kopfzeile der Tabelle ist. Aber wenn es die "" zu "" geändert wird, dann funktioniert es gut. Da es sich jedoch nur um eine einfache Zeile und nicht um eine Tabellenkopfzeile handelt, sind die Schriftarten nicht fett gedruckt.

So wie die Kopfzeile der Farbe zu ändern, um die statt ohne ??

Dank ...

Antwort

5

Es für das Hinzufügen von .info oder .success auf den Tabellenkopf kein CSS in Bootstrap ist. Sie müssen die Regel selbst machen.

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

jsfiddle

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