
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Responsive Table</title> <!-- using google font --> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet"> <!-- importing reset and custom css --> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <!-- responsive table --> <div class="holder"> <h2>Scrollable Responsive Table</h2> <p>Ipsa expedita odio autem mollitia fugiat ad repudiandae, a, tempore voluptatibus eveniet maxime eligendi suscipit! Nemo, veritatis dolore nostrum exercitationem dolor illum.</p> <div class="responsiveTbl"> <table> <thead> <tr> <th>Rank</th> <th>Full Name</th> <th>Starting Price</th> <th>Review</th> <th>Hiring</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John Smith</td> <td><span class="price">£40 / hr</span></td> <td>9.9</td> <td><a href="#" class="btn">Hire me</span></td> </tr> <tr> <td>2</td> <td>William Taylor</td> <td><span class="price">£38 / hr</span></td> <td>9.5</td> <td><a href="#" class="btn">Hire me</span></td> </tr> <tr> <td>3</td> <td>George Wilson</td> <td><span class="price">£35 / hr</span></td> <td>9.2</td> <td><a href="#" class="btn">Hire me</span></td> </tr> <tr> <td>4</td> <td>Ellen Walker</td> <td><span class="price">£39 / hr</span></td> <td>9.1</td> <td><a href="#" class="btn">Hire me</span></td> </tr> <tr> <td>5</td> <td>Emma Hall</td> <td><span class="price">£35 / hr</span></td> <td>9.0</td> <td><a href="#" class="btn">Hire me</span></td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
SCSS Code (scss/base/_reset.scss)
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } * { max-height: 1000000px; margin: 0; padding: 0; } body { color: $default-text-color; background: $default-background-color; font: 400 #{$default-font-size}/#{$default-line-height} $default-font-family; min-width: $default-min-width; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; vertical-align: top; } .gm-style img { max-width: none } @media only screen and (min-width:1025px) { a[href^=tel], a[href^=skype], a[href^=sms] { cursor: default; pointer-events: none; } } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
SCSS Code (scss/base/_typography.scss)
h1, h2, h3, h4, h5, h6 { font-family: $headings-font-family; font-weight: 500; margin: 0 0 10px; color: $headings-color; } h1 { font-size: $h1-font-size; } h2 { font-size: $h2-font-size; } h3 { font-size: $h3-font-size; } h4 { font-size: $h4-font-size; } h5 { font-size: $h5-font-size; } h6 { font-size: $h6-font-size; } p { margin: 0 0 20px; } a { color: $default-link-color; text-decoration: none; transition: color $animation-speed linear; &:hover, &:focus { text-decoration: none; color: darken($default-link-color, 15%); } }
SCSS Code (scss/base/_mixins.scss)
@mixin size($width, $height: $width) { width: $width; height: $height; } @mixin hide-text { overflow: hidden; text-indent: 101%; white-space: nowrap; } %listreset { margin: 0; padding: 0; list-style: none; } @mixin transform ($value) { -moz-transform: $value; -ms-transform: $value; -webkit-transform: $value; transform: $value; } @mixin transition ($value) { -moz-transition: $value; -ms-transition: $value; -webkit-transition: $value; transition: $value; } @mixin placeholder { &::-webkit-input-placeholder { @content } &::-moz-placeholder { opacity: 1; @content } &:-moz-placeholder { @content } &:-ms-input-placeholder { @content } &.placeholder { @content } }
SCSS Code (scss/base/_variables.scss)
// colors $black: #333; $white: #fff; $gray: #e5e5e5; $primary-color: #9b59b6; // font family $primary-font: 'Montserrat', sans-serif; // Body $default-text-color: $black !default; $default-background-color: $gray !default; $default-font-size: 14px !default; $default-line-height: 1.7 !default; $default-font-family: $primary-font !default; $default-min-width: 320px; // Links $default-link-color: $primary-color; // Headers $h1-font-size: 26px !default; $h2-font-size: 24px !default; $h3-font-size: 22px !default; $h4-font-size: 18px !default; $h5-font-size: 17px !default; $h6-font-size: 15px !default; $headings-font-family: $primary-font !default; $headings-color: $black !default; // animation $animation-speed: 0.3s;
SCSS Code (scss/main.scss)
@import 'base/variable'; @import 'base/mixins'; @import 'base/reset'; @import 'base/typography'; .container { max-width: 1024px; padding: 0 15px; margin: 30px auto; } /* responsive table */ .responsiveTbl table { text-align: center; width: 100%; } tr { background: $white; &:nth-child(2n) { background: darken($white, 5%); } &:hover { .msg { opacity: 1; top: 0; } } } th, td { padding: 15px 20px; vertical-align: middle; &:nth-child(2) { text-align: left; } } th { background: $primary-color; color: $white; font-weight: 500; text-transform: uppercase; padding: 25px 20px; } .price, .btn { border: 1px solid $primary-color; border-radius: 25px; display: inline-block; vertical-align: top; padding: 8px; min-width: 100px; text-align: center; } .btn { border: none; color: $white; background: $primary-color; transition: box-shadow 0.3s linear; &:hover { box-shadow: inset 0 0 0 25px darken($primary-color, 25%); color: $white; } } /* responsive using desktop first approach */
Video Tutorial
Updates SCSS Code (scss/main.scss)
/* responsive using desktop first approach */ @media only screen and (max-width: 767px) { .price, .btn { border: none; background: none; padding: 0; } .btn { color: $primary-color; } .responsiveTbl table { width: 767px; } .responsiveTbl { overflow: auto; } }