No more Tables

by Faisal Khan Janjua

HTML

<div id="no-more-tables">
	<table>
		<thead>
			<tr>
				<th>Code</th>
				<th>Company</th>
				<th>Price</th>
				<th>Change</th>
				<th>Change %</th>
				<th>Open</th>
				<th>High</th>
				<th>Low</th>
				<th>Volume</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td data-title="Code">AAC</td>
				<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
				<td data-title="Price">$1.38</td>
				<td data-title="Change">-0.01</td>
				<td data-title="Change %">-0.36%</td>
				<td data-title="Open">$1.39</td>
				<td data-title="High">$1.39</td>
				<td data-title="Low">$1.38</td>
				<td data-title="Volume">9,395</td>
			</tr>
			<tr>
				<td data-title="Code">AAD</td>
				<td data-title="Company">ARDENT LEISURE GROUP</td>
				<td data-title="Price">$1.15</td>
				<td data-title="Change">+0.02</td>
				<td data-title="Change %">1.32%</td>
				<td data-title="Open">$1.14</td>
				<td data-title="High">$1.15</td>
				<td data-title="Low">$1.13</td>
				<td data-title="Volume">56,431</td>
			</tr>
			<tr>
				<td data-title="Code">AAX</td>
				<td data-title="Company">AUSENCO LIMITED</td>
				<td data-title="Price">$4.00</td>
				<td data-title="Change">-0.04</td>
				<td data-title="Change %">-0.99%</td>
				<td data-title="Open">$4.01</td>
				<td data-title="High">$4.05</td>
				<td data-title="Low">$4.00</td>
				<td data-title="Volume">90,641</td>
			</tr>
			<tr>
				<td data-title="Code">ABC</td>
				<td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>
				<td data-title="Price">$3.00</td>
				<td data-title="Change">+0.06</td>
				<td data-title="Change %">2.04%</td>
				<td data-title="Open">$2.98</td>
				<td data-title="High">$3.00</td>
				<td data-title="Low">$2.96</td>
				<td data-title="Volume">862,518</td>
			</tr>
			<tr>
				<td data-title="Code">ABP</td>
				<td data-title="Company">ABACUS PROPERTY GROUP</td>
				<td data-title="Price">$1.91</td>
				<td data-title="Change">0.00</td>
				<td data-title="Change...

CSS

table {
  width: 100%;
  font-size: 12px;
  text-align:left;
  font-family: Arial, Helvetica, sans-serif;
}
table tr{
  transition: all ease-in
}
table tr:nth-child(odd) {
  background: #F1F1F1;
}
table tr:hover {
  background: #DDD !important;
}
#no-more-tables td {
  padding: 4px 0;
  position: relative;
}
@media only screen and (max-width: 800px) {
  /* Force table to not be like tables anymore */
  #no-more-tables table, 
  #no-more-tables thead, 
  #no-more-tables tbody, 
  #no-more-tables th, 
  #no-more-tables td, 
  #no-more-tables tr { 
    display: block; 
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  #no-more-tables thead tr { 
    top: -9999px;
    left: -9999px;
    position: absolute;
  }

  #no-more-tables tr { border: 1px solid #ccc; }

  #no-more-tables td {
    padding-left: 32%;
    border-bottom: 1px solid #eee;
  }
  /* Magic Starts Here */
  #no-more-tables td:before {
    top: 0;
    bottom: 0;
    left: 6px;
    margin: auto;
    font-weight: bold;
    position: absolute;
    display: table;
    content: attr(data-title);
  }
}

JavaScript

/* IF attr 'data-title' is not availabe statically use below script */

/*
$(document).ready(function(){
  if($('table').length){
    $('table').each(function(){
      if($(this).find('th').length){
        $(this).addClass('noTables');
        // Style only with specific class otherwise Normal Tables to show
        var tableTH = [];
        $(this).find('th').each(function(i){
          tableTH[i] = $(this).text();
        });
        $(this).find('tr').each(function(){
          $(this).find('td').each(function(j){
            $(this).attr('data-title',tableTH[j])
          });
        });
      }
    });
  }
});
*/