Responsive HTML Table | Responsive table css

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


esponsive 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 pages. Just scroll bar the table to see all data.

The following example will create the responsive table and if the screen too small then the 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>

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

Recommended Posts:-