Data Table Stacked

Adapt complex data table with Jquery and CSS to stacked view for mobile devices and repeat custom headers entered via the title attribute in the first tr tag of the thead section above each value

by Mariska Thomas

HTML

<div class="row padding-top-20">
	<div class="col-sm-12">
		<a name="summer-crops"></a>
		<table width="100%" id="summer-crops-table" class="table table-hover">
			<caption>
				Table 1<br/>
				<small>With id defined</small>
			</caption>
			<!--<thead class="hide-content">-->
			<thead>
				<tr class="active">
					<th width="28%" rowspan="4" scope="col" title="">Crop / Gewas</th>
					<th width="12%" scope="col" title="Area planted (2016) Oppervlakte beplant">Area planted<br/>Oppervlakte beplant</th>
					<th width="12%" scope="col" title="Seventh forecast / Sewende skatting">Seventh forecast<br/>Sewende skatting</th>
					<th width="12%" scope="col" title="Sixth forecast / Sesde skatting">Sixth forecast<br/>Sesde skatting</th>
					<th width="12%" scope="col" title="Area planted (2015) Oppervlakte beplant">Area planted<br/>Oppervlakte beplant</th>
					<th width="12%" scope="col" title="Final crop / Finale oes">Final crop<br/>Finale oes</th>
					<th width="12%" rowspan="2" scope="col" title="Change / Verandering">Change<br/>Verandering</th>
				</tr>
				<tr class="active">
					<th scope="col">2016</th>
					<th scope="col">2016</th>
					<th scope="col">2016</th>
					<th scope="col">2015</th>
					<th scope="col">2015</th>
				</tr>
				<tr class="active">
					<th scope="col">Ha</th>
					<th scope="col">Tons</th>
					<th scope="col">Tons</th>
					<th scope="col">Ha</th>
					<th scope="col">Tons</th>
					<th scope="col">%</th>
				</tr>
				<tr class="active">
					<th scope="col">(A)</th>
					<th scope="col">(B)</th>
					<th scope="col">(C)</th>
					<th scope="col">(D)</th>
					<th scope="col">(E)</th>
					<th scope="col">(B) &divide; (C)</th>
				</tr>
			</thead>
			<tbody>
				<tr class="active">
					<td colspan="7">Commercial / Kommersieël</td>
				</tr>
				
				<tr>
					<td>&nbsp; White Maize / Witmielies</td>
					<td>1 014 750</td>
					<td>3 097 225</td>
					<td>3 097 225</td>
					<td>1 448 050</td>
					<td>4 735...

CSS

body {
		font-size: 13px;
		font-weight: 400;
		letter-spacing: 0em;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #242930;
	}
 /*style for tables on desktop screens*/
caption {
		font-size: 1.4em;
		font-weight: 300;
		line-height: 100%;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		color: #465368;
		text-align: left;
	}
	caption > small {
		font-size: 80%;
		letter-spacing: -0.01em;
	}
	.table {
		letter-spacing: -0.03em;
		margin-bottom: 1.25em;
		border-top: solid 2px #d7dbdd;
		border-bottom: solid 2px #d7dbdd;
	}
	
	.table > thead > tr > th,
	.table > tbody > tr > th,
	.table > tfoot > tr > th,
	.table > thead > tr > td,
	.table > tbody > tr > td,
	.table > tfoot > tr > td {
		padding: 5px 7px;
		line-height: 120%;
		text-indent: 0;
  		border-top: none;
	}
	
	.table > thead > tr > th,
	.table > thead > tr > td {
		font-size: 1em;
		font-weight: 400;
		color: #17191b;
		border-bottom: solid 1px #e9eaeb;
	}
	
	.table > thead > tr > th.small,
	.table > thead > tr > td.small {
		font-size: 0.85em;
		letter-spacing: -0.01em;
		border-bottom: none;
	}
	
	.table > tbody > tr > td:nth-child(n+2) {
		border-bottom: solid 1px #e9eaeb;
	}
	
	.table > tbody > tr > th:first-child,
	.table > tbody > tr > td:first-child {
		border-bottom: solid 1px #d7dbdd;
		font-weight: 400;
	}
	
	.table > thead > tr > td.active,
	.table > tbody > tr > td.active,
	.table > tfoot > tr > td.active,
	.table > thead > tr > th.active,
	.table > tbody > tr > th.active,
	.table > tfoot > tr > th.active,
	.table > thead > tr.active > td,
	.table > tbody > tr.active > td,
	.table > tfoot > tr.active > td,
	.table > thead > tr.active > th,
	.table > tbody > tr.active > th,
	.table > tfoot > tr.active > th {
		background-color: #f5f4f0;
	}
	.table > thead > tr.active > th,
	.table > thead > tr.active > td {
		border-right: solid 2px #fff;
		border-top: solid 2px #fff;
		border-bottom: none;
	}
	.table > thead >...

JavaScript

(function() {
	"use strict";
   
   var tableIds = Array();
	$('table').each(function(tid) {
		if (tableIds) {
			tableIds[tid] = $(this).attr('id');
		}
	
		var currentId = tableIds[tid];
		alert('Id is: ' + currentId);
      });
      
	var header = Array();
   /*get titles from the headings*/
   $('thead tr:first-child th').each(function(i) {
		if (header) {
			header[i] = $(this).attr('title');
		}
	});
   /*loop through tbody rows and apply headings to each td*/
   $('tbody tr').each(function() {
		var thRow = $(this);
		thRow.find('td').each(function(j) {
			$(this).attr('title', header[j]);
		});
	});
}());