JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.0/underscore.string.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Pic</th>
<th>Fleet number</th>
<th>Registration</th>
<th>Documents</th>
<th>Model</th>
<th>Year</th>
<th>Auto services</th>
<th>Other</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>SV0546</td>
<td>0345</td>
<td>0123456789</td>
<td>Make_1234</td>
<td>Model_1234</td>
<td>2011</td>
<td>No</td>
<td></td>
</tr>
<tr>
<td></td>
<td>TGX554</td>
<td>RGX011</td>
<td>0123456789</td>
<td>MTF_01234</td>
<td>MODEL_MODEL</td>
<td>2012</td>
<td>Yes</td>
<td></td>
</tr>
<tr>
<td></td>
<td>TGX554</td>
<td>RGX011</td>
<td>0123456789</td>
<td>MTF_01234</td>
<td>MODEL_MODEL</td>
<td>2012</td>
<td>Yes</td>
<td></td>
</tr>
</tbody>
</table>
CSS
body {
padding: 15px;
}
table {
border-collapse: separate;
border-spacing: 0 5px;
}
thead th {
background-color: #006DCC;
color: white;
}
tbody td {
background-color: #EEEEEE;
}
tr td:first-child,
tr th:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
tr td:last-child,
tr th:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}