Responsive HTML Table | Responsive table css

Techno HTML5

Need a responsive table to display a large amount of data on the web with mobile and all another device friendly then explore it.

Responsive-

Responsive is a method by which we can see our website on all devices without scrollbar and no need to zoom on the small size.

HTML Responsive Table


In the responsive table if the screen size too small then the scrollbar will appear in the table. You have no need to scrollbar all page. Just scroll bar the table to see all data.

The following example will create the responsive table and if screen too small then scrollbar will appear in the table.


Responsive Table

Employee ID Dept Time Sunday Monday Tuesday Wednesday Thursday Friday Saturday Exit Time
Shiva 102 IT 11:30 12:30 09:00 10:00 09:00 11:00 12:00 07:00 06:00
Vishal 103 IT 11:00 07:00 09:00 12:00 06:00 12:00 07:00 10:00 05:00
Neha 104 IT 10:00 08:00 12:00 07:00 11:00 07:00 08:00 03:00 6:00

StyleSheet for table

The sylesheet is use to give the design to the table .


Now create a table using HTML.

HTML Table


<table> <tr> <th>Employee </th> <th>ID </th> <th>Dept </th> <th>Time </th> <th>Sunday </th> <th>Monday </th> <th>Tuesday </th> <th>Wednesday</th> <th>Thursday </th> <th>Friday </th> <th>Saturday </th> <th>Exit Time </th> </tr> <tr> <td>Shiva </td> <td>102 </td> <td>IT</td> <td>11:30 </td> <td>12:30 </td> <td>09:00 </td> <td>10:00 </td> <td>09:00 </td> <td>11:00 </td> <td>12:00 </td> <td>07:00 </td> <td>06:00 </td> </tr> <tr> <td>Vishal</td> <td>103</td> <td>IT</td> <td>11:00</td> <td>07:00</td> <td>09:00</td> <td>12:00</td> <td>06:00</td> <td>12:00</td> <td>07:00</td> <td>10:00</td> <td>05:00</td> </tr> <tr> <td>Neha</td> <td>104</td> <td>IT</td> <td>10:00</td> <td>08:00</td> <td>12:00</td> <td>07:00</td> <td>11:00</td> <td>07:00</td> <td>08:00</td> <td>03:00</td> <td>6:00</td> </tr> </table>
Run

Note- Create a responsive table ,use and add container element with overflow-x:auto around the <table>.