title: Hide horizontal scrollbar
body: <p>I have a problem with the horizontal scrollbar.
  I don't want it to show up. Actually it only shows up in Chrome and it doesn't in Internet Explorer.
  What can I do? I have tried  modifying width and padding in the css class, but this changes the layout as well. The content inside  test is dynamic so it can overflow vertically, and this is fine because I only don't want horizontal  scrollbar.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="test"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;test&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.test {
      BORDER-TOP: #7F9DB9 1px solid;
      BORDER-RIGHT: #7F9DB9 1px solid;
      BORDER-LEFT: #7F9DB9 1px solid;
      BORDER-BOTTOM: #7F9DB9 1px solid;
      WIDTH: 100%;
      PADDING-RIGHT: 0px;
      PADDING-LEFT: 10px;
      PADDING-BOTTOM: 10px;
      PADDING-TOP: 10px;
      HEIGHT: 100%;
      BACKGROUND-COLOR: #ffffff
  }
  </code></pre>
  
  <p>here is a fiddle if you need it: <a href="http://jsfiddle.net/XLY9L/" rel="nofollow">http://jsfiddle.net/XLY9L/</a></p>
  
  <p>Thanks</p>