title: Horizontal scroll on overflow of table
body: <p>I have a basic table in a container. The table will have about 25 columns. I am trying to add a horizontal scroll bar on overflow of the table and am having a really tough time. </p>
  
  <p>What is happening now, is the table cells are accommodating the cells contents by automatically adjusting the height of the cell and maintaining a fixed table width.</p>
  
  <p>I appreciate any suggestions on why my method is not working on  how to fix this.</p>
  
  <p>Many thanks in advance!</p>
  
  <p>CSS</p>
  
  <pre><code>.search-table-outter {margin-bottom:30px; }
  .search-table{table-layout: fixed; margin:40px auto 0px auto;  overflow-x:scroll; }
  .search-table, td, th{border-collapse:collapse; border:1px solid #777;}
  th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
  td{padding:5px 10px; height:35px;}
  tr:nth-child(even)  {background: #f5f5f5;}
  tr:nth-child(odd)   {background: #FFF;}
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="search-table-outter wrapper"&gt;
      &lt;table class="search-table inner"&gt;
          &lt;tr&gt;
              &lt;th&gt;Col1&lt;/th&gt;
              &lt;th&gt;col2&lt;/th&gt;
              &lt;th&gt;col3&lt;/th&gt;
              &lt;th&gt;col4&lt;/th&gt;
              &lt;th&gt;col5&lt;/th&gt;
              &lt;th&gt;col5&lt;/th&gt;
          &lt;/tr&gt;
          &lt;?php echo $rows; ?&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS fiddle (Note: if possible, I would like the horizontal scroll bar to be in the container with the red border):
  <a href="http://jsfiddle.net/ZXnqM/3/" rel="noreferrer">http://jsfiddle.net/ZXnqM/3/</a></p>