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.

Responsive-

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.

Please note, this is a STATIC archive of website technosmarter.com from 20 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.

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>.

Please Share