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 {
display:none;
}
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
to this:
