Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap is not changing color table header row's color while using <th> instead of <td>

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

like image 270
Siddharth Avatar asked Jan 23 '13 09:01

Siddharth


People also ask

How do I change the color of my table header?

In order to customize the Table header color, you can do it by adding either CSS or Javascript Code. Also, you can use color name or its hex code and can customize the table header color accordingly.

How do I change the background color of a table in bootstrap?

Using pre-defined classes, we can change the color of table cells and table rows. In order to change the color of the table row, we need to specify in <tr> tag with the required class & for changing the color of the table row then specify it inside <td> tag with the required class.

Which bootstrap class will provide different colors to alternate rows in a table?

Use contextual classes to color table rows or individual cells.


2 Answers

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

like image 141
hajpoj Avatar answered Sep 28 '22 02:09

hajpoj


<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>
like image 31
gavit Avatar answered Sep 28 '22 01:09

gavit