Skip to content

Instantly share code, notes, and snippets.

@imacrayon
Created Aug 7, 2019
Embed
What would you like to do?
Mobile Friendly Table Styles
@media (max-width: 768px) {
.table-collapse {
width: 100%;
& > tfoot,
& > thead {
display: none;
}
& > tbody,
& > tbody > tr,
& > tbody > tr > td,
& > tbody > tr > th {
display: block;
width: auto;
}
& > tbody > tr {
padding-top: 0.5em;
padding-bottom: 0.5em;
& > th {
border: none !important;
padding: 0.25em 0.5em;
text-align: left !important;
&:first-child {
padding-left: 0.5em;
}
&:last-child {
padding-right: 0.5em;
}
}
& > td {
border: none !important;
padding: 0.25em 0.5em 0.25em 35%;
box-shadow: none !important;
text-align: left !important;
position: relative;
&:first-child {
padding-left: 35%;
}
&:last-child {
padding-right: 0.5em;
}
&::before {
content: attr(data-heading);
position: absolute;
top: 0.25em;
left: 0.5em;
width: 35%;
padding-right: 0.25em;
white-space: nowrap;
z-index: 1;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment