JSFiddle - React, Tailwind, and code Playground
by Joshua Dwire
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div style="width:95%; margin:0 auto;">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#uno" data-toggle="tab">Tab 1</a>
</li>
<li><a href="#dos" data-toggle="tab">Tab 2</a>
</li>
<li><a href="#tres" data-toggle="tab">Tab 3</a>
</li>
</ul>
<div class="tab-content" style="width:99.9%; margin:0 auto; outline: 1px solid #ddd">
<div class="tab-pane fade active in" id="uno">
<table class="table table-striped table-bordered tablesorter">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade in" id="dos">
<table class="table table-striped table-bordered tablesorter">
<thead></thead>
<tbody></tbody>
</table>
</div>
...
CSS
@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
@import url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css');
.container {
margin-top: 10px;
}
table.table-bordered>thead>tr>th,
table.table-bordered {
border-left:0;
border-right:0;
border-top:0;
}
.tab-content{
padding:5px;
}