Skip to content

Instantly share code, notes, and snippets.

@botmad

botmad/index.html

Created October 6, 2018 15:57
Show Gist options
  • Save botmad/f49882bb423a4739daa6c383697b4187 to your computer and use it in GitHub Desktop.
Save botmad/f49882bb423a4739daa6c383697b4187 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Table (CSS only)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatibile" content="ie=edge">
<meta name="pinterest" content="nopin" />
</head>
<body>
<div class="view">
<table class="companies responsive">
<style>
/* CSS-made table column headers */
table.companies tr :nth-child(1):before{content: "Company";}
table.companies tr :nth-child(2):before{content: "Owner";}
table.companies tr :nth-child(3):before{content: "Country";}
table.companies tr :nth-child(4):before{content: "Subject";}
table.companies tr :nth-child(5):before{content: "Company";}
table.companies tr :nth-child(6):before{content: "Company";}
table.companies tr :nth-child(7):before{content: "Started";}
table.companies tr :nth-child(8):before{content: "Largest";}
table.companies tr :nth-child(9):before{content: "Current";}
</style>
<tr class="titles-vertical">
<!-- HTML headers - leave empty! Get populated by the css above -->
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<!-- Table data -->
<tr>
<td class="title">Alfreds Futterkiste</td>
<td class="subtitle">Maria Anders</td>
<td class="label">Germany ▶</td>
<td>Alfreds Futterkiste</td>
<td>Alfreds Futterkiste</td>
<td>Kurt Vonengutt</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<td class="title">Alfreds Futterkiste</td>
<td class="subtitle">Maria Anders</td>
<td class="label">Germany ▶</td>
<td>Alfreds Futterkiste</td>
<td>Alfreds Futterkiste</td>
<td>Kurt Vonengutt</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<td class="title">Alfreds Futterkiste</td>
<td class="subtitle">Maria Anders</td>
<td class="label">Germany ▶</td>
<td>Alfreds Futterkiste</td>
<td>Alfreds Futterkiste</td>
<td>Kurt Vonengutt</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<td class="title">Alfreds Futterkiste</td>
<td class="subtitle">Maria Anders</td>
<td class="label">Germany ▶</td>
<td>Alfreds Futterkiste</td>
<td>Alfreds Futterkiste</td>
<td>Kurt Vonengutt</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<td class="title">Alfreds Futterkiste</td>
<td class="subtitle">Maria Anders</td>
<td class="label">Germany ▶</td>
<td>Alfreds Futterkiste</td>
<td>Alfreds Futterkiste</td>
<td>Kurt Vonengutt</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<td class="title">Alfreds Futterkiste</td>
<td class="subtitle">Maria Anders</td>
<td class="label">Germany ▶</td>
<td>Alfreds Futterkiste</td>
<td>Alfreds Futterkiste</td>
<td>Kurt Vonengutt</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<td class="title">Alfreds Futterkiste</td>
<td class="subtitle">Maria Anders Kunst</td>
<td class="label">Active ▶</td>
<td class="long-entry">Alfreds Futterkiste</td>
<td class="long-entry">Maria Anders</td>
<td class="long-entry">Maria Anders</td>
<td class="number">342</td>
<td class="number">342</td>
<td class="number">342</td>
</tr>
</table>
</div>
</body>
</html>
Raw
responsive-table-css-only.markdown
Raw
style.scss
html {
box-sizing: border-box;
font-size: 13px;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
// Set device's default font
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1em;
.view {
width: 100%;
padding: 8px;
// background-color: #F0F0F0;
}
}
$phone-portrait-width: 414px;
$phone-landscape-width: 853px; // 736px iphone+ | 853px Galaxy Note 5
$tablet-portrait-width: 1024px;
$tablet-landscape-width: 1366px;
table {
text-align: left;
border-collapse: collapse;
th, td {
position: relative;
margin: 0;
padding: .8em .5em .5em 0em;
// border: thin solid green;
}
th {
border-bottom: thin solid black;
}
td {
border-bottom: thin solid rgba(0,0,0,0.1);
}
}
@media screen and (max-width: $tablet-landscape-width) {
table.responsive {
// Table control panel
$card-columns-on-phone-portrait: 2;
$card-columns-on-phone-landscape: 3;
$card-columns-on-tablet-portrait: 6;
$card-columns-on-tablet-landscape: 6;
$card-body-size: 1rem;
$card-title-size: 1em;
$card-label-size: .68em;
$card-top-padding: .33em;
$card-bottom-padding: .5em;
$card-side-padding: 1.2em;
$card-bg-color: white;
$card-border-radius: 14px;
$card-shadow: 0 2px 5px -3px rgba(0,0,0,0.5);
$card-margin-bottom: .5em;
position: relative;
width: 100%;
font-size: $card-body-size;
// Remove table headers row
tr:nth-child(1) {display: none;}
tr {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
width: 100%;
padding: $card-top-padding $card-side-padding $card-bottom-padding;
background-color: $card-bg-color;
box-shadow: $card-shadow;
border-radius: $card-border-radius;
margin-bottom: $card-margin-bottom;
th, td {
padding: .8em .5em .5em 0em;
border-bottom: none;
// border: thin solid green;
}
// Use headers generated by :before
td {
min-width: calc(100% / #{$card-columns-on-tablet-landscape});
@media screen and (max-width: $tablet-portrait-width) {
min-width: calc(100% / #{$card-columns-on-tablet-portrait});
}
@media screen and (max-width: $phone-landscape-width) {
min-width: calc(100% / #{$card-columns-on-phone-landscape});
}
@media screen and (max-width: $phone-portrait-width) {
min-width: calc(100% / #{$card-columns-on-phone-portrait});
}
// width: calc(100% ;
// font-size: $card-body-size;
// display: flex;
// Align last entry to the right
// &:last-child {
// text-align: right;
// padding: .8em 0em .5em 0em;
// &:before{
// right: 0;
// }
// }
&:before{
position: absolute;
top:0;
font-size: $card-label-size;
text-transform: uppercase;
color: rgba(0,0,0,0.5);
}
}
.number {
// min-width: 50%;
// font-size: .84em;
&:before{
position: absolute;
top:0;
font-size: $card-label-size;
text-transform: uppercase;
color: rgba(0,0,0,0.5);
}
}
.long-entry {
position: relative;
// min-width: 100%;
padding: 0 0 .25em;
// padding-left: 4em;
// padding-left: 4em;
// font-size: .84em;
min-width: calc(100% / #{($card-columns-on-tablet-landscape/2)});
@media screen and (max-width: $tablet-portrait-width) {
min-width: calc(100% / #{($card-columns-on-tablet-portrait/2)});
}
@media screen and (max-width: $phone-landscape-width) {
min-width: calc(100% / #{($card-columns-on-phone-landscape/2)});
}
@media screen and (max-width: $phone-portrait-width) {
min-width: calc(100% / #{($card-columns-on-phone-portrait/2)});
}
&:before{
position: relative;
top:0;
left:0;
margin-right: .5em;
font-size: $card-body-size;
text-transform: initial;
color: rgba(0,0,0,0.5);
}
}
// Title type of entry
.title {
order: -3; // make sure it's first in the list
max-width: calc(100% - 6em);
flex-shrink: 10;
// flex-grow: 10;
// margin-top:-.3em;
font-size: $card-title-size;
font-weight: 700;
// border-bottom: thin solid rgba(0,0,0,0.1);
&:before {
display: none;
}
}
// Subitle type of entry
.subtitle {
order: -1; // make sure it's first in the list
// flex-grow: 10;
margin:-1.2em 0 .33em 0;
width:100%;
color: rgba(0,0,0,0.5);
// border-bottom: thin solid rgba(0,0,0,0.1);
&:before {
display: none;
}
}
// Subitle type of entry
.label {
order: -2; // make sure it's second, after the title
width: 6em;
text-align: right;
color: rgba(0,0,0,0.5);
// border-bottom: thin solid rgba(0,0,0,0.1);
&:before {
display: none;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment