/ Tables

Responsive comparison table created for a customer but decided not to use it

Responsive comparison table created for a customer but decided not to use it

Responsive Table

Responsive comparison table created for a customer but decided not to use it. Works great, downsizing to mobile and then moving the information inside the boxes using before/after.

Made with

Html
Css/SCSS
Javascript

Html

<div class="wrap">
    <p class="intro">&lt; Responsive comparison table, decrease/increase browser width to see it in action &gt;</p>
    <h3 class="table-title">Comparison Table:</h3>
    <table class="comparison-table">
        <thead>
            <tr>
                <td></td>
                <td></td>
                <td class="marker">Package 1</td>
                <td class="marker">Package 2</td>
                <td class="marker">Package 3</td>
            </tr>
        </thead>
        <tr>
            <td>Item 1</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident laudantium.</td>
            <td class="marker">✔</td>
            <td class="marker">✔</td>
            <td class="marker">✔</td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quaerat.</td>
            <td class="marker">✔</td>
            <td class="marker">✔</td>
            <td class="marker">✔</td>
        </tr>
        <tr>
            <td>Item 3</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque maxime.</td>
            <td class="marker">✔</td>
            <td class="marker">✔</td>
            <td class="marker">✔</td>
        </tr>
        <tr>
            <td>Item 4</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo hic.</td>
            <td class="marker">✔</td>
            <td class="marker">✔</td>
            <td class="marker">✔</td>
        </tr>
        <tr>
            <td>Item 5</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam laborum!</td>
            <td class="marker">✔</td>
            <td class="marker">✔</td>
            <td class="marker">✔</td>
        </tr>
        <tr>
            <td>Item 6</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quidem.</td>
            <td class="marker">✖</td>
            <td class="marker">✔</td>
            <td class="marker">✔</td>
        </tr>
        <tr>
            <td>Item 7</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam minus.</td>
            <td class="marker">✖</td>
            <td class="marker">✖</td>
            <td class="marker">✔</td>
        </tr>
        <tr>
            <td>Item 8</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nostrum?</td>
            <td class="marker">✖</td>
            <td class="marker">✖</td>
            <td class="marker">✔</td>
        </tr>
    </table>
</div>

Css

@import "compass/css3";

//////////////////////////////////////////////////
//// VARS & MIXINS, JUST SETTING OUT THE BASE ////
//////////////////////////////////////////////////

$primary: #34b7f0;
$gutter: 40px;
$rad: 5px;

* {
  @include box-sizing(border-box);
}

@mixin font-size($sizeValue){
  font-size: $sizeValue + px;
  font-size: ($sizeValue / 10) + rem;
}

@mixin breakpoint($point) {
    @if $point == smallmobile {
        @media (max-width: 525px) { @content; }
    }
    @if $point == mobile {
        @media (max-width: 767px) { @content; }
    }
    @if $point == tablet {
        @media (max-width: 1000px) { @content; }
    }
    @if $point == smallscreen {
        @media (max-width: 1120px) { @content; }
    }
}
html {
  font-size: 10px;
}
body {
  font-family: calibri, tahoma, arial, sans-serif;
  padding: 20px;
  @include font-size(14);
  color: #555;
}

.wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.intro {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;  
  @include font-size(18);
  color: $primary;
  text-align: center;
  background: white;
  @include box-shadow(0 0 5px 0 rgba(black, 0.5));
}

///////////////////////////////////////////////////
//// END VARS/MIXINS, TABLE STUFF STARTS BELOW ////
///////////////////////////////////////////////////

h3.table-title {
    color: $primary;
    font-weight: normal;
    margin: $gutter 0 0 10px;
    @include font-size(32);
}

.comparison-table {
    display: block;
    width: 100%;
    padding: 10px;
    border-collapse: separate;
    thead tr {
        color: $primary;
        font-weight: bold;
        @include font-size(16);
        td { padding-bottom: 10px; }
        td { border: none !important; }
        @include breakpoint(mobile) {
            @include font-size(14);
            font-weight: normal;
        }
    }
    tr {
        width: 100%;
        td {
            border-right: 2px solid $primary;
        }
        &:first-child {
            td { border-top: 2px solid $primary; }
            td:first-child {
                @include border-top-left-radius($rad);
            }
            td:last-child {
                @include border-top-right-radius($rad);
            }
        }
        &:last-child {
            td { border-bottom: 2px solid $primary; }
            td:first-child {
                @include border-bottom-left-radius($rad);
            }
            td:last-child {
                @include border-bottom-right-radius($rad);
            }
        }
        td:first-child {
            width: 25%;
            padding: 10px;
            color: $primary;
            font-weight: bold;
            border-left: 2px solid $primary;
            & + td {
                width: 45%;
                padding: 10px;
            }
        }
        td.marker {
            width: 10%;
            text-align: center;
            vertical-align: middle;
            &[content="✔"] {
                color: $primary;
            }
        }
    }
    tr:nth-child(even) {
        background: #ccf1fb;
    }
    @include breakpoint(smallmobile) {
        td, tr td, tr td.marker, tr td:first-child, tr td:first-child + td {
            position: relative;
            display: block;
            width: 100%;
            border-top: none;
            border-bottom: none;
            border-left: 2px solid $primary;
        }
        tr:first-child td:first-child {
            @include border-top-right-radius($rad);
        }
        tr:first-child td:last-child {
            @include border-top-right-radius(0);
        }
        tr:last-child td:first-child {
            @include border-bottom-left-radius(0);
        }
        tr:last-child td:last-child {
            @include border-bottom-left-radius($rad);
            border-bottom: 2px solid $primary;
        }
        tr td:first-child {
            border-top: 2px solid $primary;
            & + td {
                padding: 0 10px 10px;
            }
        }
        tr td.marker {
            padding: 10px;
            font-weight: bold;
            &:before {
                content: "Package 1: ";
            }
            & + td.marker:before {
                content: "Package 2: ";
            }
            & + td.marker + td.marker:before {
                content: "Package 3: ";
            }
        }
        thead tr td.marker {
            display: none;
        }
    }
}

Javascript

$(document).ready(function() {
  $('.intro').delay(10000).fadeOut(1000);
});
// Ignore this, just for initial description //

Author

Andy Howells

Demo

See the Pen Responsive Table by Andy Howells (@andyunleash) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More