Hit enter after type your search item

Create Bootstrap responsive tables by jQuery plug-in

The jQuery plug-in for responsive tables

As using the HTML tables in your web pages, this becomes important to make it responsive so it adjusts in the smaller screens of mobiles so users may go through it easily.

In this tutorial, a jQuery plug-in is used for creating Bootstrap based tables that are responsive.

In the smaller screens, the table columns appear horizontally.

See the following section for demos and how to use this plug-in for creating responsive tables.

A demo of creating responsive Bootstrap table

For the example, an HTML table with Bootstrap and custom classes is created with a few hard-coded rows. The table structure is normal just like any other table with the table heading and table data using <th> and <td> inside the <tr> tags. Have a look at output and code by clicking the links below. If you are using a large screen then resize this to small size for seeing how it adjusts and presents each row:

jQuery responsive table

See online demo and code

For setting up this table plug-in, follow these steps.

Step 1:

Include the Bootstrap and plug-in style file in the <head> section of the webpage where you want to use it (Get the plug-in files from the credit link below):

<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>

<link href=”css/responsive-table/style.css” rel=”stylesheet”>

Step 2:

Write the markup of the table with certain classes, for example, this markup is used for the demo:



Step 3:

Include the references of jQuery, Bootstrap and plug-in JS files just above the </body> tag:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script>

<script type=”text/javascript” src=”js/responsive-table/js.js”></script>

Step 4:

A small piece of jQuery code for calling the table and its size:



You may use the class name, id in the responsiveTable method.

A demo of changing the CSS of table

As using this plug-in, you may want to change the style of the table as per need or to match with rest of the design of your website. For that, you need to use your own CSS or modify the classes in the style.css file that comes with the plug-in.

See the following demo where I have renamed the default CSS file of the plug-in and modified a few CSS classes for changing the style and look of the responsive table:

Bootstrap responsive table custom

See online demo and code

The only difference between this and the first example is the CSS while markup remains the same. In the style-custom CSS file, I changed .row-header and .table-xs .header properties where I also added the border-radius along with changing the background color of the rows for the smaller screens.


Credit: yasser-mas

This div height required for enabling the sticky sidebar