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 useful, and the type of the tables are Responsive, Striped, Bordered, Hover, Condensed, and Contextual Table

Let’s discuss bootstrap table

A 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 responsive table in bootstrap you need to use take a parent div and put their class name .table-responsive and inside that have to take the table and put a class name to the table as .table here if the table width becomes bigger than the container then there is a scroll in the access that is a horizontal scroll that 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 providing 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 the 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.