JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="panel panel-primary" id="panel" style="display: block;">
<div class="panel-heading" id="heading">1387537097625.xls</div>
<div id="table">
<table id="changes" class="table table-striped table-condensed table-bordered">
<thead style="background-color: rgb(255, 255, 255);">
<tr>
<td>Price List Name</td>
<td style="font-weight: normal;">Price list</td>
<td></td>
<td colspan="2"></td>
<td colspan="3"></td>
</tr>
<tr>
<td>Currency</td>
<td style="font-weight: normal;">EUR</td>
<td></td>
<td colspan="2" class="leftBordered">Existing price breaks</td>
<td colspan="3" class="leftBordered">New price breaks</td>
</tr>
<tr>
<td>Product Range</td>
<td>Product Description</td>
<td>Productid(s)</td>
<td class="leftBordered">1+</td>
<td>500+</td>
<td class="leftBordered">1+</td>
<td>250+</td>
<td>1000+</td>
</tr>
</thead>
<tbody>
<tr>
<td>Range</td>
<td>Some description here</td>
<td>559</td>
<td class="warning">17.6</td>
<td></td>
<td class="warning">17.6</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Another Range</td>
<td>Different...
CSS
body {
margin: 20px;
}
.panel {
border: 0;
}
.table > thead > tr > th, .table > thead > tr > td {
border: 0;
}
table > thead > tr > td.leftBordered {
border-left: 1px solid #ccc;
}