/* 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