Skip to content

Instantly share code, notes, and snippets.

@alator21

alator21/index.html

Created November 16, 2021 14:41
Show Gist options
  • Save alator21/922eaef86e794ee2e108be701188b645 to your computer and use it in GitHub Desktop.
Save alator21/922eaef86e794ee2e108be701188b645 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Table Using Flexbox
Raw
index.html
<div class="wrapper">
<div class="Rtable Rtable--5cols Rtable--collapse">
<div class="Rtable-row Rtable-row--head">
<div class="Rtable-cell date-cell column-heading">Date</div>
<div class="Rtable-cell topic-cell column-heading">Topic</div>
<div class="Rtable-cell access-link-cell column-heading">Access Link</div>
<div class="Rtable-cell replay-link-cell column-heading">Replay</div>
<div class="Rtable-cell pdf-cell column-heading">Checklist</div>
</div>
<div class="Rtable-row">
<div class="Rtable-cell date-cell">
<div class="Rtable-cell--heading">Date</div>
<div class="Rtable-cell--content date-content"><span class="webinar-date">August 2nd, 2016</span><br />6:00 pm (CDT)</div>
</div>
<div class="Rtable-cell topic-cell">
<div class="Rtable-cell--content title-content">The “Rock-Solid” Foundations Quickstart</div>
</div>
<div class="Rtable-cell access-link-cell">
<div class="Rtable-cell--heading">Access Link</div>
<div class="Rtable-cell--content access-link-content"><a href="#0"><i class="ion-link"></i></a></div>
</div>
<div class="Rtable-cell replay-link-cell">
<div class="Rtable-cell--heading">Replay</div>
<div class="Rtable-cell--content replay-link-content"><a href="#0"><i class="ion-ios-videocam"></i></a></div>
</div>
<div class="Rtable-cell Rtable-cell--foot pdf-cell">
<div class="Rtable-cell--heading">Checklist</div>
<div class="Rtable-cell--content pdf-content"><a href="#0"><i class="ion-document-text"></i></a></div>
</div>
</div>
<div class="Rtable-row is-striped">
<div class="Rtable-cell date-cell">
<div class="Rtable-cell--heading">Date</div>
<div class="Rtable-cell--content date-content"><span class="webinar-date">September 6th, 2016</span><br />6:00 pm (CDT)</div>
</div>
<div class="Rtable-cell topic-cell">
<div class="Rtable-cell--content title-content">Cash Flow Genesis</div>
</div>
<div class="Rtable-cell access-link-cell">
<div class="Rtable-cell--heading">Access Link</div>
<div class="Rtable-cell--content access-link-content"><a href="#0"><i class="ion-link"></i></a></div>
</div>
<div class="Rtable-cell replay-link-cell">
<div class="Rtable-cell--heading">Replay</div>
<div class="Rtable-cell--content replay-link-content"><a href="#0"><i class="ion-ios-videocam"></i></a></div>
</div>
<div class="Rtable-cell Rtable-cell--foot pdf-cell">
<div class="Rtable-cell--heading">Checklist</div>
<div class="Rtable-cell--content pdf-content"><a href="#0"><i class="ion-document-text"></i></a></div>
</div>
</div>
<div class="Rtable-row">
<div class="Rtable-cell date-cell">
<div class="Rtable-cell--heading">Date</div>
<div class="Rtable-cell--content date-content"><span class="webinar-date">October 4th, 2016</span><br />6:00 pm (CDT)</div>
</div>
<div class="Rtable-cell topic-cell">
<div class="Rtable-cell--content title-content">Exposing Wall Street’s Biggest Con</div>
</div>
<div class="Rtable-cell access-link-cell">
<div class="Rtable-cell--heading">Access Link</div>
<div class="Rtable-cell--content access-link-content"><a href="#0"><i class="ion-link"></i></a></div>
</div>
<div class="Rtable-cell replay-link-cell">
<div class="Rtable-cell--heading">Replay</div>
<div class="Rtable-cell--content replay-link-content"><a href="#0"><i class="ion-ios-videocam"></i></a></div>
</div>
<div class="Rtable-cell Rtable-cell--foot pdf-cell">
<div class="Rtable-cell--heading">Checklist</div>
<div class="Rtable-cell--content pdf-content"><a href="#0"><i class="ion-document-text"></i></a></div>
</div>
</div>
<div class="Rtable-row is-striped">
<div class="Rtable-cell date-cell">
<div class="Rtable-cell--heading">Date</div>
<div class="Rtable-cell--content date-content"><span class="webinar-date">November 1st, 2016</span><br />6:00 pm (CDT)</div>
</div>
<div class="Rtable-cell topic-cell">
<div class="Rtable-cell--content title-content">Member’s Choice</div>
</div>
<div class="Rtable-cell access-link-cell">
<div class="Rtable-cell--heading">Access Link</div>
<div class="Rtable-cell--content access-link-content"><a href="#0"><i class="ion-link"></i></a></div>
</div>
<div class="Rtable-cell replay-link-cell">
<div class="Rtable-cell--heading">Replay</div>
<div class="Rtable-cell--content replay-link-content"><a href="#0"><i class="ion-ios-videocam"></i></a></div>
</div>
<div class="Rtable-cell Rtable-cell--foot pdf-cell">
<div class="Rtable-cell--heading">Checklist</div>
<div class="Rtable-cell--content pdf-content"><a href="#0"><i class="ion-document-text"></i></a></div>
</div>
</div>
<div class="Rtable-row">
<div class="Rtable-cell date-cell">
<div class="Rtable-cell--heading">Date</div>
<div class="Rtable-cell--content date-content"><span class="webinar-date">December 6th, 2016</span><br />6:00 pm (CST)</div>
</div>
<div class="Rtable-cell topic-cell">
<div class="Rtable-cell--content title-content">How (and Why) to Never Borrow From a Bank Again</div>
</div>
<div class="Rtable-cell access-link-cell">
<div class="Rtable-cell--heading">Access Link</div>
<div class="Rtable-cell--content access-link-content"><a href="#0"><i class="ion-link"></i></a></div>
</div>
<div class="Rtable-cell replay-link-cell">
<div class="Rtable-cell--heading">Replay</div>
<div class="Rtable-cell--content replay-link-content"><a href="#0"><i class="ion-ios-videocam"></i></a></div>
</div>
<div class="Rtable-cell Rtable-cell--foot pdf-cell">
<div class="Rtable-cell--heading">Checklist</div>
<div class="Rtable-cell--content pdf-content"><a href="#0"><i class="ion-document-text"></i></a></div>
</div>
</div>
<div class="Rtable-row is-striped">
<div class="Rtable-cell date-cell">
<div class="Rtable-cell--heading">Date</div>
<div class="Rtable-cell--content date-content"><span class="webinar-date">January 3rd, 2017</span><br />6:00 pm (CST)</div>
</div>
<div class="Rtable-cell topic-cell">
<div class="Rtable-cell--content title-content">How to Become the Best Version of Yourself — in Business, Finances and Life</div>
</div>
<div class="Rtable-cell access-link-cell">
<div class="Rtable-cell--heading">Access Link</div>
<div class="Rtable-cell--content access-link-content"><a href="#0"><i class="ion-link"></i></a></div>
</div>
<div class="Rtable-cell replay-link-cell">
<div class="Rtable-cell--heading">Replay</div>
<div class="Rtable-cell--content replay-link-content"><a href="#0"><i class="ion-ios-videocam"></i></a></div>
</div>
<div class="Rtable-cell Rtable-cell--foot pdf-cell">
<div class="Rtable-cell--heading">Checklist</div>
<div class="Rtable-cell--content pdf-content"><a href="#0"><i class="ion-document-text"></i></a></div>
</div>
</div>
</div>
</div>
Raw
style.scss
$breakpoint: 750px;
$heading-color: #43BAC0;
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 1000px;
margin: 1em auto;
padding: 1em;
}
.is-striped { background-color: rgba(233,200,147,0.2) }
/* Table column sizing
================================== */
.date-cell { width: 20%; }
.topic-cell { width: 41%; }
.access-link-cell { width: 13%; }
.replay-link-cell { width: 13%; }
.pdf-cell { width: 13%; }
/* Apply styles
================================== */
.Rtable {
display: flex;
flex-wrap: wrap;
margin: 0 0 3em 0;
padding: 0;
box-shadow: 0 0 40px rgba(0,0,0,0.2);
.Rtable-row {
width: 100%;
display: flex;
.Rtable-cell {
box-sizing: border-box;
flex-grow: 1;
padding: 0.8em 1.2em;
overflow: hidden; // Or flex might break
list-style: none;
&.column-heading {
background-color: $heading-color;
color: white;
padding: 1em;
}
.Rtable-cell--heading {
display: none;
}
.Rtable-cell--content {
a {
font-size: 2em;
color: #333;
}
.webinar-date {
font-weight: 700;
}
}
}
}
}
/* Responsive
==================================== */
@media all and (max-width: $breakpoint) {
.is-striped {
background-color: white;
}
.Rtable--collapse {
display: block;
width: 100%;
padding: 1em;
box-shadow: none;
.Rtable-row {
box-sizing: border-box;
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 2em;
box-shadow: 0 0 40px rgba(0,0,0,0.2);
.Rtable-cell {
width: 100% !important;
display: flex;
align-items: center;
.Rtable-cell--heading {
display: inline-block;
flex: 1;
max-width: 120px;
min-width: 120px;
color: $heading-color;
font-weight: 700;
border-right: 1px solid #ccc;
margin-right: 1em;
}
.Rtable-cell--content {
flex: 2;
padding-left: 1em;
}
}
}
.topic-cell {
background-color: $heading-color;
color: white;
font-weight: 700;
order: -1;
.Rtable-cell--content {
padding-left: 0 !important;
}
}
.Rtable-row--head {
display: none;
}
}
}
// Non-Flex modernizer fallback
.no-flexbox .Rtable {
display: block;
&.Rtable-cell {
width: 100%;
}
}
Raw
styles
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment