title: Making a table horizontally scrollable without changing the existing CSS properties
body: <p>Please help me make this table horizontally scrollable without changing the existing CSS properties. The existing CSS is changing rows to column and I want to keep it that way only.</p>
  
  <pre><code>&lt;style&gt;
  
  tr{
  
  display:block;
  float:left;
  }
  td,th{
  display: block;
     border: 1px solid #ddd;
     clear:both
  }
  
  
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;h2&gt;Bordered Table&lt;/h2&gt;
    &lt;p&gt;The .table-bordered class adds borders to a table:&lt;/p&gt;            
    &lt;table class="table table-bordered"&gt;
       &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th&gt;Firstname&lt;/th&gt;
          &lt;th&gt;Lastname&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt;
        &lt;/tr&gt;
  
  
        &lt;tr&gt;
          &lt;td&gt;John&lt;/td&gt;
          &lt;td&gt;Doe&lt;/td&gt;
          &lt;td&gt;john@example.com&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Mary&lt;/td&gt;
          &lt;td&gt;Moe&lt;/td&gt;
          &lt;td&gt;mary@example.com&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;July&lt;/td&gt;
          &lt;td&gt;Dooley&lt;/td&gt;
          &lt;td&gt;july@example.com&lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>