JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<table id="dashboard" class="table table-condensed table-hover table-striped table-bordered sortableTable responsive-table">
	   <thead>
			<tr>
				<th>Col 1</th>
				<th>Col 2</th>
				<th>Date Field</th>
				<th class="rotate"><div><span>Attribute 1</span></div></th>
				<th class="rotate"><div><span>Attribute 2</span></div></th>
				<th class="rotate"><div><span>Attribute 3</span></div></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td data-label="Col 1">Data 1</td>
				<td data-label="Col 2">Data 2</td>
				<td data-label="Date Field" class="success">2014-07-03</td>
				<td data-label="Attribute 1" class="success"><a href="#">&nbsp;</a></td>
				<td data-label="Attribute 2" class="success"><a href="#">&nbsp;</a></td>
				<td data-label="Attribute 3" class="success"><a href="#">&nbsp;</a></td>
			</tr>
			<tr>
				<td data-label="Col 1">Data 3</td>
				<td data-label="Col 2">Data 4</td>
				<td data-label="Date Field" class="warning">2014-06-03</td>
				<td data-label="Attribute 1" class="success"><a href="#">&nbsp;</a></td>
				<td data-label="Attribute 2" class="warning"><a href="#">&nbsp;</a></td>
				<td data-label="Attribute 3" class="success"><a href="#">&nbsp;</a></td>
			</tr>
		</tbody>
	</table>

CSS

.table-header-rotated th.row-header{
	  width: auto;
	}

	.table-header-rotated td{
	  width: 10px;
	  vertical-align: middle;
	  text-align: center;
	}

	.table-header-rotated th.rotate{
	  height: 80px;
	  width: 10px;
	  position: relative;
	  vertical-align: bottom;
	  padding: 0;
	  font-size: 12px;
	  line-height: 0.8;
	}

	.table-header-rotated th.rotate > div{
	  position: relative;
	  top: 0px;
	  height: 100%;
	  -ms-transform:skew(0deg,0deg);
	  -moz-transform:skew(0deg,0deg);
	  -webkit-transform:skew(0deg,0deg);
	  -o-transform:skew(0deg,0deg);
	  transform:skew(0deg,0deg);
	  overflow: hidden;
	}

	.table-header-rotated th.rotate span {
	  -ms-transform:skew(0deg,0deg) rotate(270deg);
	  -moz-transform:skew(0deg,0deg) rotate(270deg);
	  -webkit-transform:skew(0deg,0deg) rotate(270deg);
	  -o-transform:skew(0deg,0deg) rotate(270deg);
	  transform:skew(0deg,0deg) rotate(270deg);
	  position: absolute;
	  bottom: 30px; 
	  left: -20px;
	  display: inline-block;
	  text-align: left;
	  text-align: center; 
	}



@media 
	only screen and (max-width: 900px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
	
		/* Force table to not be like tables anymore */
		#dashboard table, 
		#dashboard thead, 
		#dashboard tbody, 
		#dashboard th, 
		#dashboard td, 
		#dashboard tr { 
			display: block; 
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#dashboard thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		#dashboard tr { border: 1px solid #ccc; }
		
		#dashboard td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
			vertical-align: left;
			text-align: left;
		}
		
		#dashboard td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
			/* Pull label from the data-label...