JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://getbootstrap.com/javascript/"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div >
<ul class="nav nav-tabs" id="tab123" style="margin-top: 26px;">
<li><a href="#div1" data-toggle="tab" >Tab1</a></li>
<li><a href="#div2" data-toggle="tab" >Tab2</a></li>
</ul>
<div class="tab-content" style="overflow: hidden; margin-left: 20px; height: 504px;">
<div id="div1" class="tab-pane">
<div style="overflow: hidden;margin-top: 10px;" >
<table style="width: 100%" border = "1">
<thead><tr>
<th style="padding: 0px;width: 0px;visibility: hidden"></th>
<th style="padding: 0px;width: 130px;text-align: left">Text1</th>
<th style="padding: 0px;width: 181px;text-align: left">Text2 </th>
<th style="padding: 0px;width: 85px;text-align: left">Text3 </th>
<th style="padding: 0px;width:0.5px "></th>
<th style="padding: 0px;text-align: center;width: 70px">Text5</th>
</tr>
</thead>
</table>
</div>
<div style="overflow: auto;height: 50px;" class="tab-pane">
<table id ="tblSysDetails" style="width: 100%;float: left" border ="1">
<tbody >
<tr >
<td ...
CSS
/*!
* Bootstrap v2.1.1
*
* 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:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
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_canvas 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,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align:...
JavaScript
$(function() {
$('#tab123 li:eq(0) a').tab('show');
});