Question

In my rails 3.2 application I have to display a table. So I used the twitter bootstrap’s class “table table-bordered” to format it. And then to change it’s rows color I also used class “info” and “success” described here.

The table code in my page is as follows:-

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

Guess what it’s changing all rows colors except the first row that is the the head row of table. But when changed the “” to “” then it’s working fine. But because it’s just a simple row not a table header row so it’s fonts are not bold type.

So How to change the header row’s color without using the instead of ??

Thanks…

Answer 1

There is no css in bootstrap for adding .info or .success to the table header. You have to make the rule yourself.

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

jsfiddle