JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script>
<link rel="stylesheet" href="http://www.fixedheadertable.com/css/defaultTheme.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<script src="https://raw.github.com/markmalek/Fixed-Header-Table/master/jquery.fixedheadertable.min.js"></script>
<table>
<tr><td>
<table class="table table-striped">
<thead>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
</thead>
<tbody>
<tr><td>1</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>2</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>3</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>4</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>5</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>6</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>7</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>8</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>9</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>10</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
</tbody>
</table>
</td>
<td>
some<br/>
big<br/>
enough<br/>
content<br/>
but<br/>
may<br/>
be<br/>
empty
</td>
</tr>
</table>
CSS
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
@media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
JavaScript
$('.table').fixedHeaderTable({ width: 20 });