6

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

2 Answers 2

5

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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.