title: How to have only a vertical scroll bar on a div
body: <p>I have a table which is in a div. The length of the table can vary and I use the div to enforce a height.</p>
  
  <pre><code>&lt;div id='CamListDiv'&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;th&gt;&lt;input type='checkbox' id='selectAll'/&gt;&lt;/th&gt;
          &lt;th&gt;Local Camera List&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;&lt;td&gt;//camera 1 data //&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;...&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;//camera x data //&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  CSS
  #CamListDiv {
      height: 340px;
      float: left;
      overflow: auto;
      overflow-y: hidden;
  }
  </code></pre>
  
  <p>My problem is when the vertical scrollbar is needed, the space it occupies causes a horizontal scrollbar to appear. 
  I don't need the horizontal scrollbar and I tried to use the <code>overflow-y: hidden;</code> css property to hide it but this causes both scrollbars to be hidden.</p>
  
  <p>Does anyone know why <code>overflow-y:hidden;</code> isn't working as expected or how to stop the horizontal scrollbar from being visible?</p>