Twitter Bootstrap Tables

<table> classes:

Class

Description

Table

Adds basic styling (light padding and only horizontal dividers) to any <table>

table-striped

Adds alternate row style (not available in IE8)

table-bordered

Adds border on all sides of the table and cells

table-hover

Enables a hover state on table rows within <tbody>

table-condensed

Makes table more compact by cutting cell padding in half

table-responsive

Makes the table responsive to different resolution

 Example:

<table class=”table table-striped table-bordered table-hover”>

<thead>

<tr>

<th>#</th>

<th>Name</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>John</td>

</tr>

<tr>

<td>2</td>

<td>Ravi</td>

</tr>

<tr>

<td>3</td>

<td>Srinivas</td>

</tr>

</tbody>

</table>

<tr>, <th> and <td> Contextual Classes

Use the classes below to color table rows or cells:

Class

Description

Table

Applies the hover color to a particular row or cell

active

Applies the hover color to a particular row or cell

success

Indicates a successful or positive action

info

Indicates a neutral informative change or action

warning

Indicates a warning that might need attention

danger

Indicates a dangerous or potentially negative action

Responsive Tables:

By wrapping any .table in .table-responsive class, you will make the table scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

<div class=”table-responsive“>

<table class=”table”>

<caption>Responsive Table Layout</caption>

<thead>

<tr>

<th>Product</th>

<th>Payment Date</th>

<th>Status</th>

</tr>

</thead>

<tbody>

<tr>

<td>Product1</td>

<td>23/11/2013</td>

<td>Pending</td>

</tr>

<tr>

<td>Product2</td>

<td>10/11/2013</td>

<td> Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered </td>

</tr>

</tbody>

</table>

</div>

Leave a Reply