Scrollable Responsive Table

HTML Code (index.html)
<!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;
 }
}

Share this

Related Posts