title: There are multiple Bootstrap Tables on a single page. How can we achieve 'fixed header' solution in this situation?
body: <p>I'm working with bootstrap framework v3 and created 4 tables on a single page. Two in one container.</p>
  
  <p>e.g.
  First Container:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-6"&gt; &lt;table&gt; &lt;thead&gt;&lt;/thead&gt; &lt;tbody&gt;&lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; // first table
  &lt;div class="col-md-6"&gt; &lt;table&gt; &lt;thead&gt;&lt;/thead&gt; &lt;tbody&gt;&lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; // second table
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Second Container:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-6"&gt; &lt;table&gt; &lt;thead&gt;&lt;/thead&gt; &lt;tbody&gt;&lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; // third table
  &lt;div class="col-md-6"&gt; &lt;table&gt; &lt;thead&gt;&lt;/thead&gt; &lt;tbody&gt;&lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; // fourth table
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd searched the internet and tried lot of codes but headers of all the four tables on a single page are not fixing right as they should be.</p>
  
  <p>I want all the four headers and captions to be fixed while the body of the table to be scroll-able both vertically and horizontally for a given height and a width.   </p>
  
  <p><strong>Working Demo:</strong> Go to <a href="https://plnkr.co/edit/a6jY3w" rel="nofollow">Plunker</a> and launch preview in a separate window.</p>