I have an HTML page using Bootstrap and with nav-tabs on the left as per the first answer in this StackOverflow question. My codepen example is here where I attempt to have a table inside the second nav tab. However, how can I make the table be directly to the right of the tabs and not below all of them?
I've tried:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
</script>
<body>
<h3>Tabs left</h3>
<!-- tabs left -->
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li><a href="#a" data-toggle="tab">One</a></li>
<li class="active"><a href="#b" data-toggle="tab">Two</a></li>
<li><a href="#c" data-toggle="tab">Twee</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
<table class="table">
<tr>
<th> H1 </th>
<th> H2 </th>
<th> H3 </th>
</tr>
<tr>
<td>
ABC
</td>
<td>
XYZ
</td>
<td>
123
</td>
</tr>
<tr>
<td>
One
</td>
<td>
Two
</td>
<td>
Twee
</td>
</tr>
</table>
</div>
<div class="tab-pane" id="b">Secondo sed ac orci quis tortor imperdiet venenatis.</div>
<div class="tab-pane" id="c">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
</div>
</div>
</body>
