JSFiddle - React, Tailwind, and code Playground

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 table-header-rotated">
	   <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(260deg);
	  -moz-transform:skew(0deg,0deg) rotate(260deg);
	  -webkit-transform:skew(0deg,0deg) rotate(260deg);
	  -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; 
	}