Responsive Table Creation

Everyone is on their sites table uses but tables look very bad on mobile devices. Tablethe width of 100% Even if you set it to , it will shrink to a certain point and the text will be very small. It is not useful at all. In this article, I will tell you responsive table I will show you how to make it.

HTML Codes

A simple example table codes.

<table>
   <thead>
     <tr>
       <th>First Name</th>
       <th>Last Name</th>
       <th>Job Title</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>James</td>
       <td>Matman</td>
       <td>Chief Sandwich Eater</td>
     </tr>
     <tr>
       <td>The</td>
       <td>Tick</td>
       <td>Crimefighter Sorta</td>
     </tr>
   </tbody>
</table>

CSS Codes

TableWe created a general purpose for the CSS codes. You can customize the style yourself.

/* General Styles */ table { width: 100%;  border-collapse: collapse; } /* Zebra Stripes Style */ tr:nth-of-type(odd) { background: #eee; } th { background: #333;  color:white;  font-weight: bold; } td, th { padding: 6px;  border: 1px solid #ccc;  text-align: left; }

Responsive CSS Codes

This CSS codes and @media with the query tableThe banana will become responsive. What you need to pay attention to here is the "Table Headers" comment at the end. CSS These are the codes. CSS codes column headings each <td> It adds the text before the element. This is done every table You need to customize it for .

/* With this media query, we make our table responsive under 760px width. We also make it work between 768px and 1024px resolutions, improving its appearance on devices like iPads. */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide column headers (not with display: none; but) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Make it behave like a row */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Arrange as if there were column headers */ position: absolute; /* Make room for the header on the left side */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Table Headers Each <td> Add column headers for element You must customize for each table.    */ td:nth-of-type(1):before { content: &quot;First Name&quot;; } td:nth-of-type(2):before { content: &quot;Last Name&quot;; } td:nth-of-type(3):before { content: &quot;Job Title&quot;; } td:nth-of-type(4):before { content: &quot;Favorite Color&quot;; } td:nth-of-type(5):before { content: &quot;Wars of Trek?&quot;; } td:nth-of-type(6):before { content: &quot;Porn Name&quot;; } td:nth-of-type(7):before { content: &quot;Date of Birth&quot;; } td:nth-of-type(8):before { content: &quot;Dream Vacation City&quot;; } td:nth-of-type(9):before { content: &quot;GPA&quot;; } td:nth-of-type(10):before { content: &quot;Arbitrary Data&quot;; } }

Conclusion

Under 760px width tablethe banana will look like this.