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;
}
}