Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* Some CSS reset */
* {
box-sizing: border-box;
}
/* Base styles to make it look a bit more like table */
.headings,
.row {
border: 1px solid #ddd;
}
.row {
margin-top: 8px;
padding: 8px;
}
/* Table styles on default aka Small screen */
.headings {
display: none;
}
.cell {
text-align: right;
}
.cell:before {
content: attr(data-label);
float: left;
}
/* Table styles on Medium and Large screen */
@media (min-width: 768px) {
.container {
overflow-x: scroll;
overflow-y: hidden;
}
.headings {
display: block;
}
.headings:before,
.headings:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.row-container {
padding-left: 160px;
overflow: hidden;
width: 1170px;
}
.cell {
float: left;
padding: 0 8px;
text-align: left;
width: 9.0909090909%;
}
.cell:before {
display: none;
}
.cell.fixed {
background-color: white;
display: block;
margin-left: -160px;
position: absolute;
text-align: left;
}
.cell.wider {
width: 160px;
}
.row {
border-top: none;
margin-top: 0;
padding: 4px 0;
width: 1170px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.