title: Bootstrap Table Scroll Bar
body: <p>I am using bootstrap and have a list of columns inside a table. The table column so long and I would like to make it that there is a scrollbar of the table that displays elements having to scroll side.</p>
  
  <p>Here is my code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;table class="table table-bordered table-condensed table-hover table-striped"&gt;
    &lt;tr&gt;
      &lt;th&gt;PIN Number&lt;/th&gt;
      &lt;th&gt;Full Name&lt;/th&gt;
      &lt;th&gt;Department&lt;/th&gt;
      &lt;th&gt;Organization&lt;/th&gt;
      &lt;th&gt;Branch Code&lt;/th&gt;
      &lt;th&gt;Campus&lt;/th&gt;
      &lt;th&gt;Leave Type&lt;/th&gt;
      &lt;th&gt;Date From&lt;/th&gt;
      &lt;th&gt;Date To&lt;/th&gt;
      &lt;th&gt;Days&lt;/th&gt;
      &lt;th&gt;Reason&lt;/th&gt;
      &lt;th&gt;Responsible PIN&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Status&lt;/th&gt;
      &lt;th&gt;Edit&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>