Bootstrap Responsive Table  

  Responsive design in these days more popular in web. With responsive sites we no need to develop individual application for desktops, Tabs and Smartphones. Bootstrap is opensource project using bootstrap we can create responsive designs. Now I am going to design a table with Bootstrap Responsive Table.

Description :

I have table called 'emplyoee', In this table there are five columns. These five columns are not visible properly in tablets, smartphones. Then I decided to customize with Bootstrap Responsive Table, Now it is fit to all the devices. Please follow the steps to get responsive table.

Step1 :

Add below css files in page header. with help 'flip-scroll.css' you will get responsive table design. [css highlight="4"] <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-responsive.min.css"> <link rel="stylesheet" href="flip-scroll.css"> <!--Important Css file to get responsive table--> [/css]

Step2 :

Add below code in HTML body 

[html highlight="1"] <section id="flip-scroll"> <table class="table" id="datatable"> <thead> <th>S.No.</th> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> </thead> <tbody> <tr> <td>1</td> <td>Value1</td> <td>Value2</td> <td>Value3</td> <td>Value4</td> </tr> <tr> <td>2</td> <td>Value1</td> <td>Value2</td> <td>Value3</td> <td>Value4</td> </tr> <tr> <td>3</td> <td>Value1</td> <td>Value2</td> <td>Value3</td> <td>Value4</td> </tr> <tr> <td>4</td> <td>Value1</td> <td>Value2</td> <td>Value3</td> <td>Value4</td> </tr> <tr> <td>5</td> <td>Value1</td> <td>Value2</td> <td>Value3</td> <td>Value4</td> </tr> </tbody> </table> </section> [/html] In above HTML body, there is tag called section having id as 'flip-scroll'.  Before creating any table we just need to keep your HTML content in these tags. Don't forget to give a id as 'flip-scroll', See the output in your browser with responsive table.