How to Create a Responsive Table?

Herkes sitelerinde tablo kullanıyor, ancak tablolar mobil cihazlarda çok kötü görünüyor. Tablonun genişliğini %100 olarak ayarlasanız bile, bir miktar küçülecek ve metinler çok küçük olacak. Hiç kullanışlı değil. Bu makalede size duyarlı tabloyu göstereceğim.

HTML Codes

Simple sample 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

General CSS codes for tables. You can customize the style yourself.

/* General Table Styles */ table { width: 100%; border-collapse: collapse; } 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; }

CSS Codes for Responsive Design

With these CSS codes and the @media query, your table will become responsive. What you need to pay attention to here is the CSS codes that add the &quot;Table Titles&quot; description at the end. These CSS codes are <td> Inserts columns before the . You must customize this for each table.

/* With this media query we make my table responsive under 760px width. At the same time, it will also work in 768px and 1024px resolutions, improving the look on devices such as 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 (but not display: none;) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { / * Make it behave like a line * / border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { / * Edit column as if header exists * / position: absolute; /* Make room for the title on the left */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Table Headers Add column headers for each <td> element You need to customize 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 it will look like this;