Responsive Table 2

by Keith Jeter

HTML

<thead>
  <tr>
    <th colspan="4">Members</th>
  </tr>
  </thead>
<table class="rwd-table">



  <thead>
    <thead data-th="Johnny">
      <tr>
        <th colspan="4">Johnny</th>
      </tr>
    </thead>
  
    <tr>
      <th>Service Type</th>
      <th>Available</th>
      <th>Used</th>
      <th>Total</th>
    </tr>
    <tr>
      <td data-th="Service Type">Chiropractic care</td>
      <td data-th="Available">25 visits</td>
      <td data-th="Used">5 visits</td>
      <td data-th="Total">30 visits</td>
    </tr>
    <tr>
      <td data-th="Service Type">Cardiac rehabilitation</td>
      <td data-th="Available">32 visits</td>
      <td data-th="Used">3 visits</td>
      <td data-th="Total">35 visits</td>
    </tr>
    <tr>
      <td data-th="Service Type">Inpatient substance abuse treatment</td>
      <td data-th="Available">$275.00</td>
      <td data-th="Used">$75.00</td>
      <td data-th="Total">$350.00</td>
    </tr>
    
     <thead>
    <thead data-th="Nancy">
      <tr>
        <th colspan="4">Nancy</th>
      </tr>
    </thead>

    <tr>
      <th>Service Type</th>
      <th>Available</th>
      <th>Used</th>
      <th>Total</th>
    </tr>
    <tr>
      <td data-th="Service Type">Chiropractic care</td>
      <td data-th="Available">30 visits</td>
      <td data-th="Used">0 visits</td>
      <td data-th="Total">30 visits</td>
    </tr>
    <tr>
      <td data-th="Service Type">Cardiac rehabilitation</td>
      <td data-th="Available">15 visits</td>
      <td data-th="Used">20 visits</td>
      <td data-th="Total">35 visits</td>
    </tr>
    <tr>
      <td data-th="Service Type">Inpatient substance abuse treatment</td>
      <td data-th="Available">$267.00</td>
      <td data-th="Used">$83.00</td>
      <td data-th="Total">$350.00</td>
    </tr>
</table>

CSS

@import "http://fonts.googleapis.com/css?family=Montserrat:300,400,700";
table {
  width: 100%;
  border-collapse: collapse;
}


.rwd-table thead th {
  background-color: #f4f7fb;
  color: #3867b1;
  border: none;
  border: 1px solid #bfbfbf;
}

th {
  background: #f5f5f5;
  color: white;
  font-weight: bold;
}

th:first-child(1) {
  background-color: #fff;
}

td,
th {
  padding: 6px;
  border: 1px solid #bfbfbf;
  text-align: left;
}

.rwd-table {
  margin: 1em 0;
  min-width: 300px;
}



.rwd-table th {
  display: none;
}

.rwd-table td {
  display: block;
}

.rwd-table td:first-child {
  padding-top: .5em;
}

.rwd-table td:last-child {
  padding-bottom: .5em;
}

.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 7.5em;
  display: inline-block;
 }



.rwd-table th,
.rwd-table td {
  text-align: left;
}

@media (min-width: 480px) {
  .rwd-table th,
  .rwd-table td {
    display: table-cell;
    padding: .5em .5em;
}
  .rwd-table th:first-child,
  .rwd-table td:first-child {
    padding-left: 0;
}
  .rwd-table th:last-child,
  .rwd-table td:last-child {
    padding-right: 0;
  }
  .rwd-table td:before {
    display: none;
  }

}

body {
  padding: 0 2em;
  font-family: helvetica, Montserrat, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #444;
  background: #eee;
}

h1 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #323232;
}

h2 {
  font-size: 14px;
  color: #323232
}

.rwd-table {
  background: #ffffff;
  color: #323232;
  overflow: hidden;
}

.rwd-table tr {
  border-color: #bfbfbf;
}

.rwd-table th,
.rwd-table td {
  margin: .5em 1em;
}

@media (min-width: 480px) {
  .rwd-table th,
  .rwd-table td {
    padding: .85em !important;
    border-collapse: collapse;
   }
}

.rwd-table th,
.rwd-table td:before {
  color: #323232;
}

.rwd-table tr td:nth-child(2) {
  color: #438500;
}