CodePen Embed - Simple Responsive Table

<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<div class="center">
<!-- ===================Demo 1==================== --><br>
<!-- ============================================= --><br>
<table class="personal-table">
  <caption class="table-caption">Personal Information</caption>
  <thead>
    <tr class="table-head">
      <th class="table-head-cell"></th>
      <th class="table-head-cell">Last Name</th>
      <th class="table-head-cell">Gender</th>
      <th class="table-head-cell">Cell Phone Number</th>
      <th class="table-head-cell">Address</th>
      <th class="table-head-cell">Email</th>
      <th class="table-head-cell">Commuting Tool</th>
      <th class="table-head-cell">Prefered OS</th>
      <th class="table-head-cell">Cell Phone Brand</th>
      <th class="table-head-cell">Cell Phone Carrier</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 1</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
      <td class="table-body-cell" data-label="Gender">Male</td>
      <td class="table-body-cell" data-label="Cell Number">312-929-9566</td>
      <td class="table-body-cell" data-label="Address">2004 S Wells St. Apt5 Chicago, IL. 60616</td>
      <td class="table-body-cell" data-label="Email">jz@thechoppergroup.com</td>
      <td class="table-body-cell" data-label="Commuting Tool">Bike</td>
      <td class="table-body-cell" data-label="Prefered OS">OS X</td>
      <td class="table-body-cell" data-label="Cell Phone Brand">Asus</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 2</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
      <td class="table-body-cell" data-label="Gender">Male</td>
      <td class="table-body-cell" data-label="Cell Number">312-555-9566</td>
      <td class="table-body-cell" data-label="Address">222 Oxford Ct. Schaumburg, IL 60194</td>
      <td class="table-body-cell" data-label="Email">czhang@gmail.com</td>
      <td class="table-body-cell" data-label="Commuting Tool">CTA</td>
      <td class="table-body-cell" data-label="Prefered OS">MS</td>
      <td class="table-body-cell" data-label="Cell Phone Brand">Apple</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">AT&T</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 3</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
      <td class="table-body-cell" data-label="Gender">Female</td>
      <td class="table-body-cell" data-label="Cell Number">312-555-8899</td>
      <td class="table-body-cell" data-label="Address">222 Forest St. Springfield, IL 60194</td>
      <td class="table-body-cell" data-label="Email">czhang@amail.com</td>
      <td class="table-body-cell" data-label="Commuting Tool">Car</td>
      <td class="table-body-cell" data-label="Prefered OS">OS X</td>
      <td class="table-body-cell" data-label="Cell Phone Brand">Apple</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">Verizon</td>
    </tr>
  </tbody>
</table>
<!-- ===================Demo 2==================== --><br>
<!-- ============================================= --><br>
<table class="personal-table">
  <caption class="table-caption">Vertical Extreme Case</caption>
  <thead>
    <tr class="table-head">
      <th class="table-head-cell" data-label=""></td>
      <th class="table-head-cell">First Name</th>
      <th class="table-head-cell">Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 1</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 2</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 3</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 4</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 5</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 6</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 7</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 8</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 9</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 10</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
    </tr>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 11</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
    </tr>
  </tbody>
</table>
<!-- ===================Demo 3==================== --><br>
<!-- ============================================= --><br>
<table class="personal-table table-extreme-case">
  <caption class="table-caption">Horizontal Extreme Case</caption>
  <thead>
    <tr class="table-head">
      <th class="table-head-cell" data-label=""></td>
      <th class="table-head-cell">First Name</th>
      <th class="table-head-cell">Last Name</th>
      <th class="table-head-cell">Gender</th>
      <th class="table-head-cell">Number</th>
      <th class="table-head-cell">Address</th>
      <th class="table-head-cell">Email</th>
      <th class="table-head-cell">Tool</th>
      <th class="table-head-cell">OS</th>
      <th class="table-head-cell">Brand</th>
      <th class="table-head-cell">Carrier</th>
      <th class="table-head-cell">School</th>
      <th class="table-head-cell">Community</th>
      <th class="table-head-cell">Area</th>
      <th class="table-head-cell">Location</th>
      <th class="table-head-cell">Hobby</th>
      <th class="table-head-cell">major</th>
      <th class="table-head-cell">major</th>
      <th class="table-head-cell">major</th>
      <th class="table-head-cell">major</th>
      <th class="table-head-cell">major</th>
      <th class="table-head-cell">major</th>
      <th class="table-head-cell">major</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-body">
      <td class="table-body-cell" data-label="">Choice 1</td>
      <td class="table-body-cell" data-label="First Name">Joey</td>
      <td class="table-body-cell" data-label="Last Name">Zhang</td>
      <td class="table-body-cell" data-label="Gender">Male</td>
      <td class="table-body-cell" data-label="Number">9566</td>
      <td class="table-body-cell" data-label="Address">Chicago, IL. 60616</td>
      <td class="table-body-cell" data-label="Email">jz</td>
      <td class="table-body-cell" data-label="Commuting Tool">Bike</td>
      <td class="table-body-cell" data-label="Prefered OS">OS X</td>
      <td class="table-body-cell" data-label="Cell Phone Brand">Asus</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
      <td class="table-body-cell" data-label="Cell Phone Carrier">T-Mobile</td>
    </tr>
  </tbody>
</table>
</div>

@import url(https://fonts.googleapis.com/css?family=Roboto);
$mainGreen: #8ab255; 
$mainBlue: #39b1be; 
html {
  font-size: 16px; 
}
body {
  // font-family: 'Roboto', sans-serif;
  font-family: 'Inconsolata';
  line-height: 1.25;
}
.left {
  width: 66.66666%; 
}
.personal-table {
  border-collapse: collapse;
  border-style: hidden; 
  margin: 0 auto;
  padding: 0; 
  width: 100%; 
  overflow: auto;
  &.table-extreme-case {
    display: block; 
  }
  .table-caption {
    font-size: 1.5rem;
    margin: .25rem 0 .75rem;
    text-align: left;  
  }
  .table-head {
    background: $mainBlue;
    color: white; 
  }
  .table-body {
    background: whitesmoke;
    :first-child {
      background: lighten($mainBlue, 30%);
    }
    &:hover .table-body-cell{
      background-color: darken(whitesmoke, 5%);
      &:first-child {
        background: lighten($mainBlue, 25%);
      }
    }
  } 
  .table-head-cell, .table-body-cell {
    padding: .625rem;
    text-align: center;
    &.table-head-cell {
      font-size: .85em;
      letter-spacing: .1rem;
      text-transform: uppercase;
      border-right: 1px solid lighten($mainBlue, 5%);
      border-bottom: 1px solid lighten($mainBlue, 5%);
    }
    &.table-body-cell {
      border: 1px solid lighten(whitesmoke, 5%);
    }
  }
}
// border-radius style
table tr:first-child th:first-child {
  border-top-left-radius: 4px;
}
table tr:first-child th:last-child {
  border-top-right-radius: 4px;
}
table tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}
table tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

@media screen and (max-width: 1200px) {
  .personal-table {
    .table-body {
      &:hover .table-body-cell{
        background-color: whitesmoke;//disable row's hover(even)
        &:first-child {
          background: lighten($mainBlue, 30%);//disable first column hover(even)
        }
      }
      &:nth-child(odd) .table-body-cell {
        background-color: darken(whitesmoke, 5%); //color odd rows
        &:first-child {
          background-color: lighten($mainBlue, 25%); //color first-child of odd row
        }
      }
    }
  }
}
@media screen and (max-width: 600px) {
  .personal-table {
    border: 0;
    width: 100%;
    background-color: white;
    &.table-extreme-case {
      display: table; 
    }
    .table-caption {
      font-size: 1.3rem;
    }
    .table-head {
      display: none; 
    }
    .table-body {
      border-top: 3px solid $mainBlue;
      display: block;
      margin-bottom: .625rem;
      &:nth-child(odd) .table-body-cell {
        background-color: whitesmoke;
        &:first-child {
          background-color: lighten($mainBlue, 30%);
        }
      }
      .table-body-cell {
        border-bottom: 1px solid darken(white, 10%);
        border-left: 0px;
        border-right: 0px;
        display: block;
        font-size: .8rem;
        text-align: right;
        &:before {
          content: attr(data-label);
          float: left;
          font-weight: bold;
          text-transform: uppercase;
        }
        &:first-child {
          border-top: 0;
          text-align: left;
          font-weight: bold;
          font-size: 1.25rem;
        }
      }
    }
  }
  // border-radius style
  table tr:last-child td:first-child {
    border-bottom-left-radius: 0px;
  }
  table tr:last-child td:last-child {
    border-bottom-right-radius: 0px;
  }
}

View Compiled

Run Pen

This Pen is owned by Joey Zhang on CodePen. It is a fork of this Pen.

See more by @chongchizhang on CodePen

External CSS

https://fonts.googleapis.com/css?family=Open+Sans

External JavaScript

This Pen doesn't use any external JavaScript resources.