Responsive Tables

June 27, 2017

If you’re into responsive web design, you gotta admit it, sometimes it’s much more time consuming to use a css-based table solution. This is true especially when you need to re-use it again on another page or post, or when the user isn’t very familiar with html/css.

Here is one solution you can use which is also perfect if you don’t want to replace your existing tables to a css-based table.

@media only screen and (max-width: 568px) { <!-- Assuming it starts at this viewport -->
   table, thead, tbody, td, tr { 
     display: block; 
   table, thead, tbody { width: 100%; }
   thead tr, th { 
   tr { 
     border: 1px solid #d9d9d9; 
     display: block;
     width: 100%;
   td { 
     border: none; 
     border-bottom: 1px solid #d9d9d9; 
     position: relative; 
     padding-left: 50%; 
     display: block;
   td:before {
     position: absolute;
     top: 25%;
     left: 6px;
     width: 45%;
     padding-right: 10px;
     white-space: nowrap;
   td:nth-of-type(1):before { 
     content: "First Label"; 
   td:nth-of-type(2):before { 
     content: "Second Label"; 
   td:nth-of-type(3):before { 
     content: "Third Label"; 
   td:nth-of-type(4):before { 
     content: "Fourth Label"; 

This sure method will collapse the rows, from this

HTML Table, Responsive Table on Desktop
Desktop/Laptop/Tablet View

to this:

HTML Table, Responsive Table on Mobile
Mobile View
Get In Touch

Email: [email protected]


This helps us prevent spam, thank you.