Responsive Table

by Faisal Khan Janjua

HTML

<table class="table-responsive">
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th>Account</th>
      <th>Due Date</th>
      <th>Amount</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Visa - 3412</td>
      <td>04/01/2016</td>
      <td>$1,190</td>
      <td>03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td>Visa - 6076</td>
      <td>03/01/2016</td>
      <td>$2,443</td>
      <td>02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td>Corporate AMEX</td>
      <td>03/01/2016</td>
      <td>$1,181</td>
      <td>02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td>Visa - 3412</td>
      <td>02/01/2016</td>
      <td>$842</td>
      <td>01/01/2016 - 01/31/2016</td>
    </tr>
  </tbody>
</table>

<table class="table-responsive">
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th>Account</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Visa - 3412</td>
      <td>03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td>Visa - 6076</td>
      <td>02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td>Corporate AMEX</td>
      <td>02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td>Visa - 3412</td>
      <td>01/01/2016 - 01/31/2016</td>
    </tr>
  </tbody>
</table>

<table class="table-responsive">
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th>Account</th>
      <th>Amount</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Visa - 3412</td>
      <td>$1,190</td>
      <td>03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td>Visa - 6076</td>
      <td>$2,443</td>
      <td>02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td>Corporate AMEX</td>
      <td>$1,181</td>
      <td>02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td>Visa - 3412</td>
      <td>$842</td>
      <td>01/01/2016 - 01/31/2016</td>
    </tr>
  </tbody>
</table>

CSS

table.table-responsive {
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  border: 1px solid #ccc;
  border-collapse: collapse;
}
/* table.table-responsive tr {
  padding: .35rem;
  border: 1px solid #ddd;
  background-color: #f8f8f8;
}
table.table-responsive th,
table.table-responsive td {
  padding: .625rem;
  text-align: center;
}
table.table-responsive th {
  font-size: .85rem;
  letter-spacing: .1rem;
  text-transform: uppercase;
} */
@media screen and (max-width: 767px) {
  table.table-responsive {
    border: 0;
  }
  /* table.table-responsive caption {
    font-size: 1.3rem;
  } */
  table.table-responsive thead {
    padding: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: none;
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
  }
  table.table-responsive tr {
    display: block;
    /* margin-bottom: .625rem; */
    border-bottom: 3px solid #ddd;
  }
  table.table-responsive td {
    display: block;
    /* font-size: .8rem; */
    text-align: right;
    border-bottom: 1px solid #ddd;
  }
  table.table-responsive td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    padding-right: 10px;
    text-transform: uppercase;
  }
}

JavaScript

$(document).ready(function(){

	if($('.table-responsive').length) {
		$('.table-responsive').each(function(){
			var tbl = $(this);
			var thead = [];
			tbl.find('thead tr:first-child > *').each(function(){
				thead.push($(this).text());
			});
			tbl.find('tbody tr').each(function(){
				$(this).find('> *').each(function(i){
					$(this).attr('data-label', thead[i]);
				});
			});
		});
	}

});