Tutorial on How to Create Bootstrap 3 responsive table

to represent some data by row and column table is one of the most effective solution, Bootstrap providing some classes to make a Bootstrap 3 Responsive Table more attractive and usefull, and the type of the tables are Responsive, Striped, Bordered, Hover, Condensed, and Contextual Table

Lets discuss about bootstrap table

Basic table of bootstrap

to give a smooth look to a table while making a design using bootstrap and light padding and only horizontal dividers, add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we’ve opted to isolate our custom table styles.

Example:

Try It Yourself

<table class="table">
  ...
</table>

Responsive table of bootstrap

To make a responsice table in bootstrap you need to use take a parrant div and put there class name .table-responsive and inside that have to take the table and put class name to the table as .table here if the table width is become bigger than the container then there is a scroll in the y axcess that is a horizontal scroll will appear to show the table.

Example:

Try It Yourself

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Bootstrap Striped table

The striped table is provideng a zebra colored row of a table and for that need to use the class name .table-striped and .table to the <table> tag

Example:

Try It Yourself

<table class="table table-striped">
  ...
</table>	

Bootstrap Bordered table

the bordered table is used to make a table with border around its td and table and to make that use .table-bordered and .table to the <table> tag

Example:

Try It Yourself

<table class="table table-bordered">
  ...
</table>	

Bootstrap Hover table

The bootstrap hover table is on hover the background of the hover row will be little dark and to make a table hover effect use the class .table-hover and .table to the <table> tag

Example:

Try It Yourself

<table class="table table-hover">
  ...
</table>	

Bootstrap Condensed table

The bootstrap condensed table is cutting the half cell padding and make the table compact, to make a condensed table use the class .table-condensed and .table to the <table> tag

Example:

Try It Yourself

<table class="table table-condensed">
  ...
</table>	

Bootstrap Contextual table

The bootstrap contextual table is used to make the row and column background color, to make a Contextual table use the class name .active, .success, .info, .warning, .danger to the <td> and <tr> tag

.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

Example:

Try It Yourself

<table class="table">

<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>


<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>
</table>

in this post you have learned Bootstrap 3 Responsive Table hope it will help you. 	

Please provide your comment to make the site better . Thanks for reading.

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.