Bootstrap Tab example

by panchroma

HTML

<ul class="nav nav-tabs" id="product-table">
  <li><a href="#1" data-toggle="tab">Grade 1</a>
  </li>
  <li><a href="#2" data-toggle="tab">Grade 2</a>
  </li>
  <li><a href="#3" data-toggle="tab">Grade 3</a>
  </li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="1">
      <table class="table table-condensed table-bordered table-striped volumes">
        <thead>
          <tr>
            <th>Warehouse</th>
            <th>Grain Volume</th>
            <th>Trade Volume</th>
            <th>Direction</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>NFRA MPANDA RUKWA</td>
            <td>487</td>
            <td>487.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>COTCORI Cooperative</td>
            <td>113</td>
            <td>113.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>ENAS GBC KIREHE</td>
            <td>131</td>
            <td>131.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Government Procurement and Supply Agent</td>
            <td>453</td>
            <td>453.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Nairobi(test)</td>
            <td>261</td>
            <td>250.00</td>
            <td>IN</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="tab-pane" id="2">
      <table class="table table-condensed table-bordered table-striped volumes">
        <thead>
          <tr>
            <th>Warehouse</th>
            <th>Grain Volume</th>
            <th>Trade Volume</th>
            <th>Direction</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>National Food Reserve Agency_Manyoni</td>
            <td>172</td>
            <td>172.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Sodea GBC</td>
            <td>471</td>
            <td>20.00</td>
            <td>OUT</td>
         ...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/*!
 * Bootstrap v2.2.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
a:hover,
a:active {
  outline: 0;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

img {
  /* Responsive images (ensure images don't scale beyond their parents) */

  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */

  width: auto\9;
  /* IE7-8 need help adjusting responsive images */

  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

#map img {
  max-width: none;
}
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button,
input {
  *overflow: visible;
  line-height: normal;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-appearance:...

JavaScript

$('#product-table a:first').tab('show');