bootstrap responsive table

Basic Table

A basic Bootstrap table has a light padding and only horizontal dividers by giving the class name class .table to any table.

Ex.

< table class=”table” > … </table >

Striped rows

In a table with class .table if we use the class .table-striped the table row will be zebra striping.

Ex.

< table class=”table  table-striped” > … </table >

Bordered table

To Give Border on all side of a table user have to give the class .table-bordered with the class .table in a table tag.

Ex.

< table class=”table  table-bordered” > … </table >

Row Hover

To give a hover effect on row in wgich the mouse is moving on then user have to add the class .table-hover with the class .table in a table tag.

Ex.

< table class=”table table-hover” > … </table >

Condensed table

If we have to make a table more compact then we can use the class .table-condensed with the class .table in a html table tag.

Ex.

< table class=”table  table-condensed” > … </table >

Make a row active

To make a table row active we can use the class .active in tr tag of a table

Ex.

&tr; table class=”active” > … </tr >

Make a row colored

To make a table row colored we can use the classes .success , .info , .warning , .danger in a row of a table body

and can be also used in a column by adding the classes in a td tag.

Ex.

< tr class=”success” > … </tr >

< tr class=”info” > … </tr >

< tr class=”warning” > … </tr >

< tr class=”danger” > … </tr >

And

< td class=”success” > … </td >

< td class=”info” > … </td >

< td class=”warning” > … </td >

< td class=”danger” > … </td >

Responsive Table

To make a table responsive using bootstrap 3 user have to giv the class .table-responsive to the parrent tag of the table with class .table

Ex.

< div class=”table-responsive” >

< table class=”table” > … < /table >

< /div >

For More details visit my website