Skip to content

Instantly share code, notes, and snippets.

@bueltge
Created October 21, 2019 12:17
Show Gist options
  • Save bueltge/d0d817c662fe83711d964ba2944e967b to your computer and use it in GitHub Desktop.
Save bueltge/d0d817c662fe83711d964ba2944e967b to your computer and use it in GitHub Desktop.
Simple Responsive Tables with Flexbox
/* Default table styles for this demo */
table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
table tr {
background: white;
border-bottom: 1px solid
}
table th, table td {
padding: 10px 20px;
}
table td span {
background: #eee;
color: dimgrey;
display: none;
font-size: 10px;
font-weight: bold;
padding: 5px;
position: absolute;
text-transform: uppercase;
top: 0;
left: 0;
}
/* Simple CSS for flexbox table on mobile */
@media(max-width: 800px) {
table thead {
left: -9999px;
position: absolute;
visibility: hidden;
}
table tr {
border-bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 40px;
}
table td {
border: 1px solid;
margin: 0 -1px -1px 0;
padding-top: 35px;
position: relative;
width: 50%;
}
table td span {
display: block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment