12+ CSS Table Examples

This post contains a total of 12+ Hand-Picked CSS Table Examples with Source Code. All these Tables are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

Click a Code to Copy it.

CSS Table Examples

1. By Davide Rizzo

Made by Davide Rizzo. Simple Responsive Tables (Cell styles). Source

CSS Table by Davide Rizzo
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
/* Variables
================================== */
/* Tables
================================== */
.Rtable {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 3em 0;
  padding: 0;
}
.Rtable-cell {
  box-sizing: border-box;
  flex-grow: 1;
  width: 100%;
  padding: 0.8em 1.2em;
  overflow: hidden;
  list-style: none;
  border: solid 3px white;
  background: rgba(112, 128, 144, 0.2);
}
.Rtable-cell > h1,
.Rtable-cell > h2,
.Rtable-cell > h3,
.Rtable-cell > h4,
.Rtable-cell > h5,
.Rtable-cell > h6 {
  margin: 0;
}
/* Table column sizing
================================== */
.Rtable--2cols > .Rtable-cell {
  width: 50%;
}
.Rtable--3cols > .Rtable-cell {
  width: 33.33%;
}
.Rtable--4cols > .Rtable-cell {
  width: 25%;
}
.Rtable--5cols > .Rtable-cell {
  width: 20%;
}
.Rtable--6cols > .Rtable-cell {
  width: 16.6%;
}
/* Page styling
================================== */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/josefinsans/v25/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMZhKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/josefinsans/v25/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_N_XbMZhKg.ttf) format('truetype');
}
html {
  height: 100%;
  background-color: #EEE;
}
body {
  box-sizing: border-box;
  min-height: 100%;
  margin: 0 auto;
  padding: 2em;
  max-width: 800px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.2em;
  background-color: white;
  border: double 3px #DDD;
  border-top: none;
  border-bottom: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}
h3 {
  font-size: 1.2em;
}
h4 {
  font-size: 1em;
}
strong {
  color: #434d57;
}
/* Apply styles
================================== */
.Rtable {
  position: relative;
  top: 3px;
  left: 3px;
}
.Rtable-cell {
  margin: -3px 0 0 -3px;
  background-color: white;
  border-color: #e2e6e9;
}
/* Cell styles
================================== */
.Rtable-cell--dark {
  background-color: slategrey;
  border-color: #5a6673;
  color: white;
}
.Rtable-cell--dark > h1,
.Rtable-cell--dark > h2,
.Rtable-cell--dark > h3,
.Rtable-cell--dark > h4,
.Rtable-cell--dark > h5,
.Rtable-cell--dark > h6 {
  color: white;
}
.Rtable-cell--medium {
  background-color: #b8c0c8;
  border-color: #a9b3bc;
}
.Rtable-cell--light {
  background-color: white;
  border-color: #e2e6e9;
}
.Rtable-cell--highlight {
  background-color: lightgreen;
  border-color: #64e764;
}
.Rtable-cell--alert {
  background-color: darkorange;
  border-color: #cc7000;
  color: white;
}
.Rtable-cell--alert > h1,
.Rtable-cell--alert > h2,
.Rtable-cell--alert > h3,
.Rtable-cell--alert > h4,
.Rtable-cell--alert > h5,
.Rtable-cell--alert > h6 {
  color: white;
}
.Rtable-cell--head {
  background-color: slategrey;
  border-color: #5a6673;
  color: white;
}
.Rtable-cell--head > h1,
.Rtable-cell--head > h2,
.Rtable-cell--head > h3,
.Rtable-cell--head > h4,
.Rtable-cell--head > h5,
.Rtable-cell--head > h6 {
  color: white;
}
.Rtable-cell--foot {
  background-color: #b8c0c8;
  border-color: #a9b3bc;
}
</style>
</head>
<body>
  <h2>Cell styling</h2>

<div class="Rtable">
  <div class="Rtable-cell Rtable-cell--dark">Dark cell</div>
  <div class="Rtable-cell Rtable-cell--medium">Medium cell</div>
  <div class="Rtable-cell Rtable-cell--light">Light cell</div>
  <div class="Rtable-cell Rtable-cell--highlight">Highlight cell</div>
  <div class="Rtable-cell Rtable-cell--alert">Alert cell</div>
</div>

<h3>Example table</h3>
<div class="Rtable Rtable--3cols">

  <div style="order:0;" class="Rtable-cell Rtable-cell--head"><h3>Eddard Stark</h3></div>
  <div style="order:1;" class="Rtable-cell">Has a sword named Ice</div>
  <div style="order:2;" class="Rtable-cell">No direwolf</div>
  <div style="order:3;" class="Rtable-cell Rtable-cell--foot"><strong>Lord of Winterfell</strong></div>

  <div style="order:0;" class="Rtable-cell Rtable-cell--head"><h3>Jon Snow</h3></div>
  <div style="order:1;" class="Rtable-cell">Has a sword named Longclaw</div>
  <div style="order:2;" class="Rtable-cell">Direwolf: Ghost</div>
  <div style="order:3;" class="Rtable-cell Rtable-cell--foot"><strong>Knows nothing</strong></div>

  <div style="order:0;" class="Rtable-cell Rtable-cell--head"><h3>Arya Stark</h3></div>
  <div style="order:1;" class="Rtable-cell">Has a sword named Needle</div>
  <div style="order:2;" class="Rtable-cell">Direwolf: Nymeria</div>
  <div style="order:3;" class="Rtable-cell Rtable-cell--foot"><strong>No one</strong></div>

</div>
</body>
</html>

2. By Ahmad Awais

Made by Ahmad Awais. Simple html and css table. Source

CSS Table by Ahmad Awais
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,500,300,700,400'>
  
<style>
body {
  display: table;
  width: 100%;
  background: #dedede;
  text-align: center;
}

* {
  /* Safari/Chrome, other WebKit */
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}

.aa_h2 {
  font: 100 5rem/1 Roboto;
  text-transform: uppercase;
}

table {
  background: #fff;
}

table,
thead,
tbody,
tfoot,
tr,
td,
th {
  text-align: center;
  margin: auto;
  border: 1px solid #dedede;
  padding: 1rem;
  width: 50%;
}

.table {
  display: table;
  width: 50%;
}

.tr {
  display: table-row;
}

.thead {
  display: table-header-group;
}

.tbody {
  display: table-row-group;
}

.tfoot {
  display: table-footer-group;
}

.col {
  display: table-column;
}

.colgroup {
  display: table-column-group;
}

.td,
.th {
  display: table-cell;
  width: 50%;
}

.caption {
  display: table-caption;
}

.table,
.thead,
.tbody,
.tfoot,
.tr,
.td,
.th {
  text-align: center;
  margin: auto;
  padding: 1rem;
}

.table {
  background: #fff;
  margin: auto;
  border: none;
  padding: 0;
  margin-bottom: 5rem;
}

.th {
  font-weight: 700;
  border: 1px solid #dedede;
}
.th:nth-child(odd) {
  border-right: none;
}

.td {
  font-weight: 300;
  border: 1px solid #dedede;
  border-top: none;
}
.td:nth-child(odd) {
  border-right: none;
}

.aa_htmlTable {
  background: tomato;
  padding: 5rem;
  display: table;
  width: 100%;
  height: 100vh;
  vertical-align: middle;
}

.aa_css {
  background: skyblue;
  padding: 5rem;
  display: table;
  width: 100%;
  height: 100vh;
  vertical-align: middle;
}

.ahmadawais {
  display: table;
  width: 100%;
  font: 100 1.2rem/2 Roboto;
  margin: 5rem auto;
}

.twitter {
  position: fixed;
  display: block;
  right: 12px;
  bottom: 12px;
}
.twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}
</style>
</head>
<body>
  <div class="aa_htmlTable">
  <h2 class="aa_h2">HTML Table</h2>
  <table>
    <thead>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Sum</td>
        <td>$180</td>
      </tr>
    </tfoot>
  </table>
</div>

<div class="aa_css">
  
  <h2 class="aa_h2">CSS Table</h2>

  <div class="table">
    <div class="thead">
      <div class="tr">
        <div class="th">.table > .thead > .tr > .th</div>
        <div class="th">.table > .thead > .tr > .th</div>
      </div>
    </div>
    <div class="tbody">
      <div class="tr">
        <div class="td">
          .table > .tbody > .tr > .td 
        </div>
        <div class="td">
          .table > .tbody > .tr > .td
        </div>
      </div>
      <div class="tr">
        <div class="td">
          .table > .tbody > .tr > .td
        </div>
        <div class="td">
          .table > .tbody > .tr > .td
        </div>
      </div>
    </div>
    <div class="tfoot">
      <div class="tr">
        <div class="td">
          .table > .tfoot > .tr > .td
        </div>
        <div class="td">
          .table > .tfoot > .tr > .td
        </div>
      </div>
    </div>
  </div>
  
  <div class="ahmadawais">
  Developed by  <a href="http://AhmadAwais.com/about"  target="_top">Ahmad Awais</a> - Open Source Engineer & Dev Advocate
</div>
</div>

<!-- Follow me on Twitter -->
<a class="twitter" target="_top" href="https://twitter.com/MrAhmadAwais"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

</body>
</html>

3. By Javier C

Made by Javier C. Responsive calendar made using css table. Source

CSS Table by javier c
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style>
table {
  font-family: sans-serif;
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  margin-bottom: 50px;
}
table thead tr th {
  background: #626E7E;
  color: #d1d5db;
  padding: 0.5em;
  overflow: hidden;
}
table thead tr th:first-child {
  border-radius: 3px 0 0 0;
}
table thead tr th:last-child {
  border-radius: 0 3px  0 0;
}
table thead tr th .day {
  display: block;
  font-size: 1.2em;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin: 0 auto 5px;
  padding: 5px;
  line-height: 1.8;
}
table thead tr th .day.active {
  background: #d1d5db;
  color: #626E7E;
}
table thead tr th .short {
  display: none;
}
table thead tr th i {
  vertical-align: middle;
  font-size: 2em;
}
table tbody tr {
  background: #d1d5db;
}
table tbody tr:nth-child(odd) {
  background: #c8cdd4;
}
table tbody tr:nth-child(4n+0) td {
  border-bottom: 1px solid #626E7E;
}
table tbody tr td {
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid #626E7E;
  position: relative;
  height: 32px;
  cursor: pointer;
}
table tbody tr td:last-child {
  border-right: 1px solid #626E7E;
}
table tbody tr td.hour {
  font-size: 2em;
  padding: 0;
  color: #626E7E;
  background: #fff;
  border-bottom: 1px solid #626E7E;
  border-collapse: separate;
  min-width: 100px;
  cursor: default;
}
table tbody tr td.hour span {
  display: block;
}
@media (max-width: 60em) {
  table thead tr th .long {
    display: none;
  }
  table thead tr th .short {
    display: block;
  }
  table tbody tr td.hour span {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
  }
}
@media (max-width: 27em) {
  table thead tr th {
    font-size: 65%;
  }
  table thead tr th .day {
    display: block;
    font-size: 1.2em;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 0 auto 5px;
    padding: 5px;
  }
  table thead tr th .day.active {
    background: #d1d5db;
    color: #626E7E;
  }
  table tbody tr td.hour {
    font-size: 1.7em;
  }
  table tbody tr td.hour span {
    transform: translateY(16px) rotate(270deg);
    -webkit-transform: translateY(16px) rotate(270deg);
    -moz-transform: translateY(16px) rotate(270deg);
  }
}
</style>
</head>
<body>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<table>
  <thead>
    <tr>
      <th></th>
      <th>
        <span class="day">1</span>
        <span class="long">Monday</span>
        <span class="short">Mon</span>
      </th>
      <th>
        <span class="day">2</span>
        <span class="long">Tuesday</span>
        <span class="short">Tue</span>
      </th>
      <th>
        <span class="day">3</span>
        <span class="long">Wendsday</span>
        <span class="short">We</span>
      </th>
      <th>
        <span class="day">4</span>
        <span class="long">Thursday</span>
        <span class="short">Thur</span>
      </th>
      <th>
        <span class="day active">5</span>
        <span class="long">Friday</span>
        <span class="short">Fri</span>
      </th>
      <th>
        <span class="day">6</span>
        <span class="long">Saturday</span>
        <span class="short">Sat</span>
      </th>
      <th>
        <span class="day">7</span>
        <span class="long">Sunday</span>
        <span class="short">Sun</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="hour" rowspan="4"><span>1:00</span></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="hour" rowspan="4"><span>2:00</span></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    
    <tr>
      <td class="hour" rowspan="4"><span>3:00</span></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="hour" rowspan="4"><span>4:00</span></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="hour" rowspan="4"><span>5:00</span></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="hour" rowspan="4"><span>6:00</span></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="hour" rowspan="4"><span>7:00</span></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="hour" rowspan="4"><span>8:00</span></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

4. By Andrew Lohman

Made by Andrew Lohman. CSS Table with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
/* Google fonts - Open Sans */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
/* colors */
/* body */
body {
  background: rgba(0, 0, 0, 0.9);
  font-family: "Open Sans", sans-serif;
}

/* links */
.nfl a, .mlb a, .nhl a, .pga a {
  text-decoration: none;
  transition: color 0.2s ease-out;
}

.nfl a {
  color: #4fc0d2;
}

.nfl a:hover {
  color: #268695;
}

.mlb a {
  color: #52d29a;
}

.mlb a:hover {
  color: #279766;
}

.nhl a {
  color: rgba(231, 196, 104, 0.7);
}

.nhl a:hover {
  color: rgba(201, 154, 32, 0.7);
}

.pga a {
  color: #eb7655;
}

.pga a:hover {
  color: #c33d17;
}

/* wrapper */
.wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 20px auto 100px auto;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  position: relative;
}

/* lists */
.row ul {
  margin: 0;
  padding: 0;
}

.row ul li {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  list-style: none;
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
  .row ul li {
    font-size: 13px;
  }
}
@media only screen and (max-width: 479px) {
  .row ul li {
    font-size: 13px;
  }
}

.title ul li {
  padding: 15px 13px;
}

.row ul li {
  padding: 5px 10px;
}

/* rows */
.row {
  padding: 20px 0;
  height: 30px;
  font-size: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-out;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.row:hover {
  background-color: rgba(26, 26, 26, 0.9);
  height: 65px;
}
@media only screen and (max-width: 767px) {
  .row:hover {
    height: 85px;
  }
}
@media only screen and (max-width: 359px) {
  .row:hover {
    height: 105px;
  }
}

.title {
  padding: 25px 0 5px 0;
  height: 45px;
  font-size: 0;
  background-color: rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(255, 255, 255, 0.1);
}

.title:hover {
  height: 45px;
  background-color: rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(255, 255, 255, 0.1);
}

@media only screen and (max-width: 767px) {
  .title-hide {
    display: none;
  }
}

.nfl {
  border-left: 3px solid #1c616c;
}

.nfl:hover {
  border-left: 3px solid #4fc0d2;
}

.mlb {
  border-left: 3px solid #1d6e4b;
}

.mlb:hover {
  border-left: 3px solid #52d29a;
}

.nhl {
  border-left: 3px solid rgba(157, 121, 25, 0.7);
}

.nhl:hover {
  border-left: 3px solid rgba(231, 196, 104, 0.7);
}

.pga {
  border-left: 3px solid #952f12;
}

.pga:hover {
  border-left: 3px solid #eb7655;
}

/* row one - fadeIn */
.row-fadeIn-wrapper {
  opacity: 0;
  font-size: 0;
  height: 0;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease-out;
  -webkit-animation: fadeIn 0.4s ease-out 2s 1 alternate;
          animation: fadeIn 0.4s ease-out 2s 1 alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.row-fadeIn-wrapper:hover {
  height: 35px;
}
@media only screen and (max-width: 767px) {
  .row-fadeIn-wrapper:hover {
    height: 55px;
  }
}
@media only screen and (max-width: 359px) {
  .row-fadeIn-wrapper:hover {
    height: 75px;
  }
}

.fadeIn {
  padding: 20px 0;
  font-size: 0;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}

.fadeIn:hover {
  background-color: rgba(26, 26, 26, 0.9);
}

/* row two - fadeOut */
.row-fadeOut-wrapper {
  font-size: 0;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease-out;
  -webkit-animation: fadeOut 0.4s ease-out 8s 1 alternate;
          animation: fadeOut 0.4s ease-out 8s 1 alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  height: 65px;
}

.row-fadeOut-wrapper:hover {
  height: 100px;
}

/* update content */
.update-row {
  -webkit-animation: update 0.5s ease-out 12s 1 alternate;
          animation: update 0.5s ease-out 12s 1 alternate;
}

.update1 {
  position: absolute;
  top: 25px;
  display: inline-block;
  opacity: 1;
  -webkit-animation: update1 1s ease-out 12s 1 alternate;
          animation: update1 1s ease-out 12s 1 alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.update2 {
  position: absolute;
  top: 25px;
  display: inline-block;
  opacity: 0;
  -webkit-animation: update2 4s ease-out 13s 1 alternate;
          animation: update2 4s ease-out 13s 1 alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

/* more content */
ul.more-content li {
  position: relative;
  top: 22px;
  font-size: 13px;
  margin: 0;
  padding: 10px 13px;
  display: block;
  height: 50px;
  width: 100%;
  color: rgba(128, 128, 128, 0.9);
}
@media only screen and (max-width: 767px) {
  ul.more-content li {
    font-size: 11px;
  }
}

/* small content */
.small {
  color: rgba(102, 102, 102, 0.9);
  font-size: 10px;
  padding: 0 10px;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .small {
    display: none;
  }
}

/* keyframe animations */
@-webkit-keyframes fadeIn {
  from {
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    padding: 0;
  }
  to {
    background: rgba(51, 51, 51, 0.1);
    opacity: 1;
    padding: 0 0 65px 0;
  }
}
@keyframes fadeIn {
  from {
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    padding: 0;
  }
  to {
    background: rgba(51, 51, 51, 0.1);
    opacity: 1;
    padding: 0 0 65px 0;
  }
}
@-webkit-keyframes fadeOut {
  from {
    background: rgba(51, 51, 51, 0.1);
    opacity: 1;
    height: 65px;
  }
  to {
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    height: 0;
  }
}
@keyframes fadeOut {
  from {
    background: rgba(51, 51, 51, 0.1);
    opacity: 1;
    height: 65px;
  }
  to {
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    height: 0;
  }
}
@-webkit-keyframes update {
  0% {
    background: rgba(51, 51, 51, 0.1);
  }
  50% {
    background: rgba(255, 255, 255, 0.1);
  }
  100% {
    background: rgba(51, 51, 51, 0.1);
  }
}
@keyframes update {
  0% {
    background: rgba(51, 51, 51, 0.1);
  }
  50% {
    background: rgba(255, 255, 255, 0.1);
  }
  100% {
    background: rgba(51, 51, 51, 0.1);
  }
}
@-webkit-keyframes update1 {
  0% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes update1 {
  0% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes update2 {
  0% {
    opacity: 0;
    color: rgba(255, 255, 255, 0.9);
  }
  20% {
    opacity: 1;
    color: #52d29a;
  }
  100% {
    opacity: 1;
    color: rgba(255, 255, 255, 0.9);
  }
}
@keyframes update2 {
  0% {
    opacity: 0;
    color: rgba(255, 255, 255, 0.9);
  }
  20% {
    opacity: 1;
    color: #52d29a;
  }
  100% {
    opacity: 1;
    color: rgba(255, 255, 255, 0.9);
  }
}
</style>
</head>
<body>
  <section class="wrapper">
    <!-- Row title -->
    <main class="row title">
      <ul>
        <li>Sport</li>
        <li>Entry $</li>
        <li><span class="title-hide">#</span> Entries</li>
        <li>Max</li>
        <li>Time</li>
      </ul>
    </main>
    <!-- Row 1 - fadeIn -->
    <section class="row-fadeIn-wrapper">
      <article class="row fadeIn nfl">
        <ul>
          <li><a href="#">NFL</a><span class="small">(fadeIn)</span></li>
          <li>$50</li>
          <li>12</li>
          <li>48</li>
          <li>2:00ET</li>
        </ul>
        <ul class="more-content">
          <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
        </ul>
      </article>
    </section>
    <!-- Row 2 - fadeOut -->
    <section class="row-fadeOut-wrapper">
      <article class="row nfl">
        <ul>
          <li><a href="#">NFL</a><span class="small">(fadeOut)</span></li>
          <li>$5</li>
          <li>45</li>
          <li>100</li>
          <li>3:00ET</li>
        </ul>
        <ul class="more-content">
          <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
        </ul>
      </article>
    </section>
    <!-- Row 3 -->
    <article class="row nfl">
      <ul>
        <li><a href="#">NHL</a></li>
        <li>$50</li>
        <li>12</li>
        <li>48</li>
        <li>12:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </article>
    <!-- Row 4 -->
    <article class="row mlb update-row">
      <ul>
        <li><a href="#">MLB</a><span class="small">(update)</span></li>
        <li>$10</li>
        <li><span class="update1">1</span><span class="update2">2</span></li>
        <li>10</li>
        <li>1:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </article>
    <!-- Row 5 -->
    <article class="row mlb">
      <ul>
        <li><a href="#">MLB</a></li>
        <li>$5</li>
        <li>48</li>
        <li>120</li>
        <li>12:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </article>
    <!-- Row 6 -->
    <article class="row nhl">
      <ul>
        <li><a href="#">NHL</a></li>
        <li>$50</li>
        <li>12</li>
        <li>48</li>
        <li>12:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </article>
    <!-- Row 7 -->
    <article class="row nhl">
      <ul>
        <li><a href="#">NHL</a></li>
        <li>$50</li>
        <li>12</li>
        <li>48</li>
        <li>12:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </article>
    <!-- Row 8 -->
    <article class="row pga">
      <ul>
        <li><a href="#">PGA</a></li>
        <li>$50</li>
        <li>12</li>
        <li>48</li>
        <li>11:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </article>
    <!-- Row 9 -->
    <article class="row pga">
      <ul>
        <li><a href="#">PGA</a></li>
        <li>$50</li>
        <li>12</li>
        <li>48</li>
        <li>11:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </article>
    <!-- Row 10 -->
    <article class="row pga">
      <ul>
        <li><a href="#">PGA</a></li>
        <li>$50</li>
        <li>12</li>
        <li>48</li>
        <li>11:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </article>
    <!-- Row 11 -->
    <article class="row mlb">
      <ul>
        <li><a href="#">MLB</a></li>
        <li>$10</li>
        <li>1</li>
        <li>10</li>
        <li>1:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </article>
  </section>
</body>
</html>

5. By Marco Biedermann

Made by Marco Biedermann. Simple Calendar made using css tables. Source

CSS Table by marco
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">

<style>
body {
	background: #ccc;
  display: grid;
	font: 87.5%/1.5em 'Lato', sans-serif;
	margin: 0;
  min-height: 100vh;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  place-items: center;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td {
	padding: 0;
}

.calendar-container {
	position: relative;
	width: 450px;
}

.calendar-container header {
	border-radius: 1em 1em 0 0;
	background: #e66b6b;
	color: #fff;
	padding: 3em 2em;
}

.day {
	font-size: 8em;
	font-weight: 900;
	line-height: 1em;
}

.month {
	font-size: 4em;
	line-height: 1em;
	text-transform: lowercase;
}

.calendar {
	background: #fff;
	border-radius: 0 0 1em 1em;
	-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
	box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
	color: #555;
	display: inline-block;
	padding: 2em;
}

.calendar thead {
	color: #e66b6b;
	font-weight: 700;
	text-transform: uppercase;
}

.calendar td {
	padding: .5em 1em;
	text-align: center;
}

.calendar tbody td:hover {
	background: #cacaca;
	color: #fff;
}

.current-day {
	color: #e66b6b;
}

.prev-month,
.next-month {
	color: #cacaca;
}

.ring-left,
.ring-right {
	position: absolute;
	top: 230px;
}

.ring-left { left: 2em; }
.ring-right { right: 2em; }

.ring-left:before,
.ring-left:after,
.ring-right:before,
.ring-right:after {
	background: #fff;
	border-radius: 4px;
	-webkit-box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
	box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
	content: "";
	display: inline-block;
	margin: 8px;
	height: 32px;
	width: 8px;
}
</style>
</head>
<body>
  <div class="container">

  <div class="calendar-container">

    <header>
      
      <div class="day">18</div>
      <div class="month">August</div>

    </header>

    <table class="calendar">
      
      <thead>

        <tr>

          <td>Mon</td>
          <td>Tue</td>
          <td>Wed</td>
          <td>Thu</td>
          <td>Fri</td>
          <td>Sat</td>
          <td>Sun</td>

        </tr>

      </thead>

      <tbody>

        <tr>
          <td class="prev-month">29</td>
          <td class="prev-month">30</td>
          <td class="prev-month">31</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>

        <tr>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>11</td>
        </tr>

        <tr>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td class="current-day">18</td>
        </tr>

        <tr>
          <td>19</td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td>25</td>
        </tr>

        <tr>
          <td>26</td>
          <td>27</td>
          <td>28</td>
          <td>29</td>
          <td>30</td>
          <td>31</td>
          <td class="next-month">1</td>
        </tr>

      </tbody>

    </table>

    <div class="ring-left"></div>
    <div class="ring-right"></div>

  </div> <!-- end calendar-container -->

</div> <!-- end container -->
</body>
</html>

6. By Chris Smith

Made by Chris Smith. CSS Zigzag table. Source

CSS Table by chris smith
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
h1 {
  color: #c00;
  font-family: sans-serif;
  font-size: 2em;
  margin-bottom: 0;
}

table {
  font-family: sans-serif;
}
table th, table td {
  padding: 0.25em 0.5em;
  text-align: left;
}
table th:nth-child(2), table td:nth-child(2) {
  text-align: right;
}
table td {
  background-color: #eee;
}
table th {
  background-color: #009;
  color: #fff;
}

.zigzag {
  border-collapse: separate;
  border-spacing: 0.25em 1em;
}
.zigzag tbody tr:nth-child(odd) {
  transform: rotate(2deg);
}
.zigzag thead tr,
.zigzag tbody tr:nth-child(even) {
  transform: rotate(-2deg);
}
</style>
</head>
<body>
  <h1>Top England Goal Scorers</h1>

<table class="zigzag">
  <thead>
    <tr>
      <th class="header">Player</th>
      <th class="header">Goals</th>
      <th class="header">First</th>
      <th class="header">Latest</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Wayne Rooney</td>
      <td>53</td>
      <td>06 Sep 2003</td>
      <td>27 Jun 2016</td>
    </tr>
    <tr>
      <td>Bobby Charlton</td>
      <td>49</td>
      <td>19 Apr 1958</td>
      <td>20 May 1970</td>
    </tr>
    <tr>
      <td>Gary Lineker</td>
      <td>48</td>
      <td>26 Mar 1985</td>
      <td>29 Apr 1992</td>
    </tr>
    <tr>
      <td>Jimmy Greaves</td>
      <td>44</td>
      <td>17 May 1959</td>
      <td>24 May 1967</td>
    </tr>
    <tr>
      <td>Michael Owen </td>
      <td>40</td>
      <td>27 May 1998</td>
      <td>12 Sep 2007</td>
    </tr>
    <tr>
      <td>Alan Shearer</td>
      <td>30</td>
      <td>19 Feb 1992</td>
      <td>20 Jun 2000</td>
    </tr>
    <tr>
      <td>Tom Finney</td>
      <td>30</td>
      <td>28 Sep 1946</td>
      <td>04 Oct 1958</td>
    </tr>
    <tr>
      <td>Nat Lofthouse</td>
      <td>30</td>
      <td>22 Nov 1950</td>
      <td>22 Oct 1958</td>
    </tr>
    <tr>
      <td>Vivian Woodward</td>
      <td>29</td>
      <td>14 Feb 1903</td>
      <td>13 Mar 1911</td>
    </tr>
    <tr>
      <td>Frank Lampard</td>
      <td>29</td>
      <td>20 Aug 2003</td>
      <td>29 May 2013</td>
    </tr>
  </tbody>
</table>
</body>
</html>

7. By Alan

Made by Alan. Simple Responsive CSS Div table. Source

CSS Table by alan
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
<style>
.table {
    display: table;
    text-align: center;
    width: 60%;
    margin: 10% auto 0;
    border-collapse: separate;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
  }
  
  .table_row {
    display: table-row;
  }
  
  .theader {
    display: table-row;
  }
  
  .table_header {
    display: table-cell;
    border-bottom: #ccc 1px solid;
    border-top: #ccc 1px solid;
    background: #bdbdbd;
    color: #e5e5e5;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
  }
  
  .table_header:first-child {
    border-left: #ccc 1px solid;
    border-top-left-radius: 5px;
  }
  
  .table_header:last-child {
    border-right: #ccc 1px solid;
    border-top-right-radius: 5px;
  }
  
  .table_small {
    display: table-cell;
  }
  
  .table_row > .table_small > .table_cell:nth-child(odd) {
    display: none;
    background: #bdbdbd;
    color: #e5e5e5;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .table_row > .table_small > .table_cell {
    padding-top: 3px;
    padding-bottom: 3px;
    color: #5b5b5b;
    border-bottom: #ccc 1px solid;
  }
  
  .table_row > .table_small:first-child > .table_cell {
    border-left: #ccc 1px solid;
  }
  
  .table_row > .table_small:last-child > .table_cell {
    border-right: #ccc 1px solid;
  }
  
  .table_row:last-child > .table_small:last-child > .table_cell:last-child {
    border-bottom-right-radius: 5px;
  }
  
  .table_row:last-child > .table_small:first-child > .table_cell:last-child {
    border-bottom-left-radius: 5px;
  }
  
  .table_row:nth-child(2n+3) {
    background: #e9e9e9;
  }
  
  @media screen and (max-width: 900px) {
    .table {
      width: 90%
    }
  }
  
  @media screen and (max-width: 650px) {
    .table {
      display: block;
    }
    .table_row:nth-child(2n+3) {
      background: none;
    }
    .theader {
      display: none;
    }
    .table_row > .table_small > .table_cell:nth-child(odd) {
      display: table-cell;
      width: 50%;
    }
    .table_cell {
      display: table-cell;
      width: 50%;
    }
    .table_row {
      display: table;
      width: 100%;
      border-collapse: separate;
      padding-bottom: 20px;
      margin: 5% auto 0;
      text-align: center;
    }
    .table_small {
      display: table-row;
    }
    .table_row > .table_small:first-child > .table_cell:last-child {
      border-left: none;
    }
    .table_row > .table_small > .table_cell:first-child {
      border-left: #ccc 1px solid;
    }
    .table_row > .table_small:first-child > .table_cell:first-child {
      border-top-left-radius: 5px;
      border-top: #ccc 1px solid;
    }
    .table_row > .table_small:first-child > .table_cell:last-child {
      border-top-right-radius: 5px;
      border-top: #ccc 1px solid;
    }
    .table_row > .table_small:last-child > .table_cell:first-child {
      border-right: none;
    }
    .table_row > .table_small > .table_cell:last-child {
      border-right: #ccc 1px solid;
    }
    .table_row > .table_small:last-child > .table_cell:first-child {
      border-bottom-left-radius: 5px;
    }
    .table_row > .table_small:last-child > .table_cell:last-child {
      border-bottom-right-radius: 5px;
    }
  }
</style>
</head>
<body>
  <div class="table" id="results">
  <div class='theader'>
    <div class='table_header'>Header One</div>
    <div class='table_header'>Header Two</div>
    <div class='table_header'>Header Three</div>
    <div class='table_header'>Header Four</div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-1.2726</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.1311</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>-0.4782</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>-0.9919</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-0.89</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.7986</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>0.876</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>0.498</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-1.1669</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.4949</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>-0.7113</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>0.434</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>0.1996</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>-0.7693</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>1.974</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>-0.959</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-1.5998</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>-0.1149</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>1.3888</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>-0.0689</div>
    </div>
  </div>
</div>
</body>
</html>

8. By Aurer

Made by Aurer. Basic responsive table. Source

CSS Table by aurer
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
body{
  padding: 1em;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAQElEQVQIW2P89OvDfwYo+PHjJ4zJwMHBzsAIk0SXAKkCS2KTAEu++vQSbizIKGQAl0SXAJkGlsQmAbcT2Shk+wH0sCzAEOZW1AAAAABJRU5ErkJggg==);
}
a{
  color: #739931;
}
.page{
  max-width: 60em;
  margin: 0 auto;
}
table th,
table td{
  text-align: left;
}
table.layout{
  width: 100%;
  border-collapse: collapse;
}
table.display{
  margin: 1em 0;
}
table.display th,
table.display td{
  border: 1px solid #B3BFAA;
  padding: .5em 1em;
}

table.display th{ background: #D5E0CC; }
table.display td{ background: #fff; }

table.responsive-table{
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 30em){
    table.responsive-table{
      box-shadow: none;  
    }
    table.responsive-table thead{
      display: none; 
    }
  table.display th,
  table.display td{
    padding: .5em;
  }
    
  table.responsive-table td:nth-child(1):before{
    content: 'Number';
  }
  table.responsive-table td:nth-child(2):before{
    content: 'Name';
  }
  table.responsive-table td:nth-child(1),
  table.responsive-table td:nth-child(2){
    padding-left: 25%;
  }
  table.responsive-table td:nth-child(1):before,
  table.responsive-table td:nth-child(2):before{
    position: absolute;
    left: .5em;
    font-weight: bold;
  }
  
    table.responsive-table tr,
    table.responsive-table td{
        display: block;
    }
    table.responsive-table tr{
        position: relative;
        margin-bottom: 1em;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }
    table.responsive-table td{
        border-top: none;
    }
    table.responsive-table td.organisationnumber{
        background: #D5E0CC;
        border-top: 1px solid #B3BFAA;
    }
    table.responsive-table td.actions{
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: none;
    }
}
</style>
</head>
<body>
  <div class="page">
 <h1>A responsive table</h1>
<table class="layout display responsive-table">
    <thead>
        <tr>
            <th>Number</th>
            <th colspan="2">Name</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td class="organisationnumber">140406</td>
            <td class="organisationname">Stet clita kasd gubergren, no sea takimata sanctus est</td>
            <td class="actions">
                <a href="?" class="edit-item" title="Edit">Edit</a>
                <a href="?" class="remove-item" title="Remove">Remove</a>
            </td>
        </tr>

        <tr>
            <td class="organisationnumber">140412</td>
            <td class="organisationname">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</td>
            <td class="actions">
                <a href="?" class="edit-item" title="Edit">Edit</a>
                <a href="?" class="remove-item" title="Remove">Remove</a>
            </td>
        </tr>

        <tr>
            <td class="organisationnumber">140404</td>
            <td class="organisationname">Vel illum dolore eu feugiat nulla facilisis at vero eros</td>
            <td class="actions">
                <a href="?" class="edit-item" title="Edit">Edit</a>
                <a href="?" class="remove-item" title="Remove">Remove</a>
            </td>
        </tr>

        <tr>
            <td class="organisationnumber">140408</td>
            <td class="organisationname">Iusto odio dignissim qui blandit praesent luptatum zzril delenit</td>
            <td class="actions">
                <a href="?" class="edit-item" title="Edit">Edit</a>
                <a href="?" class="remove-item" title="Remove">Remove</a>
            </td>
        </tr>

        <tr>
            <td class="organisationnumber">140410</td>
            <td class="organisationname">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam
            </td>
            <td class="actions">
                <a href="?" class="edit-item" title="Edit">Edit</a>
                <a href="?" class="remove-item" title="Remove">Remove</a>
            </td>
        </tr>

    </tbody>
</table>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

</body>
</html>

9. By Dom

Made by Dom. A nice looking HTML table styled with CSS. Source

CSS Table by dom
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
* {
  font-family: sans-serif; /* Change your font family */
}

.content-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  min-width: 400px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.content-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

.content-table th,
.content-table td {
  padding: 12px 15px;
}

.content-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.content-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.content-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.content-table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}
</style>
</head>
<body>
  <table class="content-table">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>Points</th>
      <th>Team</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Domenic</td>
      <td>88,110</td>
      <td>dcode</td>
    </tr>
    <tr class="active-row">
      <td>2</td>
      <td>Sally</td>
      <td>72,400</td>
      <td>Students</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Nick</td>
      <td>52,300</td>
      <td>dcode</td>
    </tr>
  </tbody>
</table>
</body>
</html>

10. By Chris Coyier

Made by Chris Coyier. Nutrition Facts Table in HTML and CSS. Source

CSS Table by chris coyier
<!DOCTYPE html>
<html lang="en" class="[email protected]">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@charset "UTF-8";
.image {
  width: 250px;
  float: left;
  margin: 20px;
}

body {
  font-size: small;
  line-height: 1.4;
}

p {
  margin: 0;
}

.performance-facts {
  border: 1px solid black;
  margin: 20px;
  float: left;
  width: 280px;
  padding: 0.5rem;
}
.performance-facts table {
  border-collapse: collapse;
}

.performance-facts__title {
  font-weight: bold;
  font-size: 2rem;
  margin: 0 0 0.25rem 0;
}

.performance-facts__header {
  border-bottom: 10px solid black;
  padding: 0 0 0.25rem 0;
  margin: 0 0 0.5rem 0;
}
.performance-facts__header p {
  margin: 0;
}

.performance-facts__table, .performance-facts__table--grid, .performance-facts__table--small {
  width: 100%;
}
.performance-facts__table thead tr th, .performance-facts__table--grid thead tr th, .performance-facts__table--small thead tr th,
.performance-facts__table thead tr td,
.performance-facts__table--grid thead tr td,
.performance-facts__table--small thead tr td {
  border: 0;
}
.performance-facts__table th, .performance-facts__table--grid th, .performance-facts__table--small th,
.performance-facts__table td,
.performance-facts__table--grid td,
.performance-facts__table--small td {
  font-weight: normal;
  text-align: left;
  padding: 0.25rem 0;
  border-top: 1px solid black;
  white-space: nowrap;
}
.performance-facts__table td:last-child, .performance-facts__table--grid td:last-child, .performance-facts__table--small td:last-child {
  text-align: right;
}
.performance-facts__table .blank-cell, .performance-facts__table--grid .blank-cell, .performance-facts__table--small .blank-cell {
  width: 1rem;
  border-top: 0;
}
.performance-facts__table .thick-row th, .performance-facts__table--grid .thick-row th, .performance-facts__table--small .thick-row th,
.performance-facts__table .thick-row td,
.performance-facts__table--grid .thick-row td,
.performance-facts__table--small .thick-row td {
  border-top-width: 5px;
}

.small-info {
  font-size: 0.7rem;
}

.performance-facts__table--small {
  border-bottom: 1px solid #999;
  margin: 0 0 0.5rem 0;
}
.performance-facts__table--small thead tr {
  border-bottom: 1px solid black;
}
.performance-facts__table--small td:last-child {
  text-align: left;
}
.performance-facts__table--small th,
.performance-facts__table--small td {
  border: 0;
  padding: 0;
}

.performance-facts__table--grid {
  margin: 0 0 0.5rem 0;
}
.performance-facts__table--grid td:last-child {
  text-align: left;
}
.performance-facts__table--grid td:last-child::before {
  content: "โ€ข";
  font-weight: bold;
  margin: 0 0.25rem 0 0;
}

.text-center {
  text-align: center;
}

.thick-end {
  border-bottom: 10px solid black;
}

.thin-end {
  border-bottom: 1px solid black;
}
</style>
</head>
<body>
  <img src="https://s.cdpn.io/3/NutritionFacts.gif" class="image">

<section class="performance-facts">
  <header class="performance-facts__header">
    <h1 class="performance-facts__title">Nutrition Facts</h1>
    <p>Serving Size 1/2 cup (about 82g)
      <p>Serving Per Container 8</p>
  </header>
  <table class="performance-facts__table">
    <thead>
      <tr>
        <th colspan="3" class="small-info">
          Amount Per Serving
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th colspan="2">
          <b>Calories</b>
          200
        </th>
        <td>
          Calories from Fat
          130
        </td>
      </tr>
      <tr class="thick-row">
        <td colspan="3" class="small-info">
          <b>% Daily Value*</b>
        </td>
      </tr>
      <tr>
        <th colspan="2">
          <b>Total Fat</b>
          14g
        </th>
        <td>
          <b>22%</b>
        </td>
      </tr>
      <tr>
        <td class="blank-cell">
        </td>
        <th>
          Saturated Fat
          9g
        </th>
        <td>
          <b>22%</b>
        </td>
      </tr>
      <tr>
        <td class="blank-cell">
        </td>
        <th>
          Trans Fat
          0g
        </th>
        <td>
        </td>
      </tr>
      <tr>
        <th colspan="2">
          <b>Cholesterol</b>
          55mg
        </th>
        <td>
          <b>18%</b>
        </td>
      </tr>
      <tr>
        <th colspan="2">
          <b>Sodium</b>
          40mg
        </th>
        <td>
          <b>2%</b>
        </td>
      </tr>
      <tr>
        <th colspan="2">
          <b>Total Carbohydrate</b>
          17g
        </th>
        <td>
          <b>6%</b>
        </td>
      </tr>
      <tr>
        <td class="blank-cell">
        </td>
        <th>
          Dietary Fiber
          1g
        </th>
        <td>
          <b>4%</b>
        </td>
      </tr>
      <tr>
        <td class="blank-cell">
        </td>
        <th>
          Sugars
          14g
        </th>
        <td>
        </td>
      </tr>
      <tr class="thick-end">
        <th colspan="2">
          <b>Protein</b>
          3g
        </th>
        <td>
        </td>
      </tr>
    </tbody>
  </table>

  <table class="performance-facts__table--grid">
    <tbody>
      <tr>
        <td colspan="2">
          Vitamin A
          10%
        </td>
        <td>
          Vitamin C
          0%
        </td>
      </tr>
      <tr class="thin-end">
        <td colspan="2">
          Calcium
          10%
        </td>
        <td>
          Iron
          6%
        </td>
      </tr>
    </tbody>
  </table>

  <p class="small-info">* Percent Daily Values are based on a 2,000 calorie diet. Your daily values may be higher or lower depending on your calorie needs:</p>

  <table class="performance-facts__table--small small-info">
    <thead>
      <tr>
        <td colspan="2"></td>
        <th>Calories:</th>
        <th>2,000</th>
        <th>2,500</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th colspan="2">Total Fat</th>
        <td>Less than</td>
        <td>65g</td>
        <td>80g</td>
      </tr>
      <tr>
        <td class="blank-cell"></td>
        <th>Saturated Fat</th>
        <td>Less than</td>
        <td>20g</td>
        <td>25g</td>
      </tr>
      <tr>
        <th colspan="2">Cholesterol</th>
        <td>Less than</td>
        <td>300mg</td>
        <td>300 mg</td>
      </tr>
      <tr>
        <th colspan="2">Sodium</th>
        <td>Less than</td>
        <td>2,400mg</td>
        <td>2,400mg</td>
      </tr>
      <tr>
        <th colspan="3">Total Carbohydrate</th>
        <td>300g</td>
        <td>375g</td>
      </tr>
      <tr>
        <td class="blank-cell"></td>
        <th colspan="2">Dietary Fiber</th>
        <td>25g</td>
        <td>30g</td>
      </tr>
    </tbody>
  </table>

  <p class="small-info">
    Calories per gram:
  </p>
  <p class="small-info text-center">
    Fat 9
    &bull;
    Carbohydrate 4
    &bull;
    Protein 4
  </p>

</section>  
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

11. By alassetter

Made by alassetter. Simple CSS Data Table. Source

CSS Table by alassetter
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);

body {
  background-color: #3e94ec;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

div.table-title {
   display: block;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
}

.table-title h3 {
   color: #fafafa;
   font-size: 30px;
   font-weight: 400;
   font-style:normal;
   font-family: "Roboto", helvetica, arial, sans-serif;
   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
   text-transform:uppercase;
}


/*** Table Styles **/

.table-fill {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 
th {
  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:23px;
  font-weight: 100;
  padding:24px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

th:first-child {
  border-top-left-radius:3px;
}
 
th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
 
tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
}
 
tr:first-child {
  border-top:none;
}

tr:last-child {
  border-bottom:none;
}
 
tr:nth-child(odd) td {
  background:#EBEBEB;
}
 
tr:nth-child(odd):hover td {
  background:#4E5066;
}

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
td {
  background:#FFFFFF;
  padding:20px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:18px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

th.text-left {
  text-align: left;
}

th.text-center {
  text-align: center;
}

th.text-right {
  text-align: right;
}

td.text-left {
  text-align: left;
}

td.text-center {
  text-align: center;
}

td.text-right {
  text-align: right;
}
</style>
</head>
<body>
<div class="table-title">
<h3>Data Table</h3>
</div>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Month</th>
<th class="text-left">Sales</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">January</td>
<td class="text-left">$ 50,000.00</td>
</tr>
<tr>
<td class="text-left">February</td>
<td class="text-left">$ 10,000.00</td>
</tr>
<tr>
<td class="text-left">March</td>
<td class="text-left">$ 85,000.00</td>
</tr>
<tr>
<td class="text-left">April</td>
<td class="text-left">$ 56,000.00</td>
</tr>
<tr>
<td class="text-left">May</td>
<td class="text-left">$ 98,000.00</td>
</tr>
</tbody>
</table>
</body>
</html>

12. By TJ VanToll

Made by TJ VanToll. CSS Only Fixed Table Headers. Source

CSS Table by tj
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}
</style>
</head>
<body>
  <!-- IE < 10 does not like giving a tbody a height.  The workaround here applies the scrolling to a wrapped <div>. -->
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->

<table class="fixed_headers">
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Plum</td>
      <td>Purple</td>
      <td>These are Purple</td>
    </tr>
    <tr>
      <td>Watermelon</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Tomato</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cantelope</td>
      <td>Orange</td>
      <td>These are orange inside.</td>
    </tr>
    <tr>
      <td>Honeydew</td>
      <td>Green</td>
      <td>These are green inside.</td>
    </tr>
    <tr>
      <td>Papaya</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Raspberry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Blueberry</td>
      <td>Blue</td>
      <td>These are blue.</td>
    </tr>
    <tr>
      <td>Mango</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Passion Fruit</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

<!--[if lte IE 9]>
</div>
<!--<![endif]-->
</body>
</html>

13. By Jack Rugile

Made by Jack Rugile. Fade and Blur on Hover CSS Table. Source

CSS Table by jack rugile
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
<style>
body {
	background: #fafafa url(https://jackrugile.com/images/misc/noise-diagonal.png);
	color: #444;
	font: 100%/30px 'Helvetica Neue', helvetica, arial, sans-serif;
	text-shadow: 0 1px 0 #fff;
}

strong {
	font-weight: bold; 
}

em {
	font-style: italic; 
}

table {
	background: #f5f5f5;
	border-collapse: separate;
	box-shadow: inset 0 1px 0 #fff;
	font-size: 12px;
	line-height: 24px;
	margin: 30px auto;
	text-align: left;
	width: 800px;
}	

th {
	background: url(https://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444);
	border-left: 1px solid #555;
	border-right: 1px solid #777;
	border-top: 1px solid #555;
	border-bottom: 1px solid #333;
	box-shadow: inset 0 1px 0 #999;
	color: #fff;
  font-weight: bold;
	padding: 10px 15px;
	position: relative;
	text-shadow: 0 1px 0 #000;	
}

th:after {
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
	content: '';
	display: block;
	height: 25%;
	left: 0;
	margin: 1px 0 0 0;
	position: absolute;
	top: 25%;
	width: 100%;
}

th:first-child {
	border-left: 1px solid #777;	
	box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
	box-shadow: inset -1px 1px 0 #999;
}

td {
	border-right: 1px solid #fff;
	border-left: 1px solid #e8e8e8;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #e8e8e8;
	padding: 10px 15px;
	position: relative;
	transition: all 300ms;
}

td:first-child {
	box-shadow: inset 1px 0 0 #fff;
}	

td:last-child {
	border-right: 1px solid #e8e8e8;
	box-shadow: inset -1px 0 0 #fff;
}	

tr {
	background: url(https://jackrugile.com/images/misc/noise-diagonal.png);	
}

tr:nth-child(odd) td {
	background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);	
}

tr:last-of-type td {
	box-shadow: inset 0 -1px 0 #fff; 
}

tr:last-of-type td:first-child {
	box-shadow: inset 1px -1px 0 #fff;
}	

tr:last-of-type td:last-child {
	box-shadow: inset -1px -1px 0 #fff;
}	

tbody:hover td {
	color: transparent;
	text-shadow: 0 0 3px #aaa;
}

tbody:hover tr:hover td {
	color: #444;
	text-shadow: 0 1px 0 #fff;
}
</style>
</head>
<body>
  <table>
  <thead>
    <tr>
      <th>Option</th>
      <th>Default</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>showSpeed</strong></td>
      <td>15</td>
      <td>The speed of the show/reveal</td>
    </tr>
    <tr>
      <td><strong>showEasing</strong></td>
      <td>'linear'</td>
      <td>The easing of the show/reveal</td>
    </tr>
    <tr>
      <td><strong>hideSpeed</strong></td>
      <td>50</td>
      <td>The speed of the hide/conceal</td>
    </tr>
    <tr>
      <td><strong>hideEasing</strong></td>
      <td>'linear'</td>
      <td>The easing of the hide/conceal</td>
    </tr>					
    <tr>
      <td><strong>width</strong></td>
      <td>'auto'</td>
      <td>The width that the data will be truncated to - <em>('auto' or px amount)</em></td>
    </tr>
    <tr>
      <td><strong>ellipsis</strong></td>
      <td>true</td>
      <td>Set to true to enable the ellipsis</td>
    </tr>
    <tr>
      <td><strong>title</strong></td>
      <td>false</td>
      <td>Set to true to show the full data on hover</td>
    </tr>
    <tr>
      <td><strong>afterShow</strong></td>
      <td> $.noop</td>
      <td>The callback fired after the show/reveal</td>
    </tr>
    <tr>
      <td><strong>afterHide</strong></td>
      <td>$.noop</td>
      <td>The callback fired after the hide/conceal</td>
    </tr>
  </tbody>
</table>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>