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...
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.
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.
Use contextual classes to color table rows or individual cells.
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
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With