title: How to place scroll bar on side of table?
body: <p>I have a jsfiddle here: <a href="http://jsfiddle.net/m4HB3/" rel="nofollow">http://jsfiddle.net/m4HB3/</a></p>
  
  <p>I have a scrolling table with fixed headers which is working correctly. The problem I am having is where the scroll bar is placed, it is placed sligthly underneath the last column which causes it to take up some of the last column space and thus moves the other columns off alignment.</p>
  
  <p>My question is how can I clip the scroll bar to the right of the table so it does not affect taking up column space?</p>
  
  <p>Below is html of sample table:</p>
  
  <pre><code>&lt;table id="tableqanda" cellpadding="0" cellspacing="0"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th width="5%" class="questionno"&gt;Question No.&lt;/th&gt;
          &lt;th width="27%" class="question"&gt;Question&lt;/th&gt;
          &lt;th width="7%" class="option"&gt;Option Type&lt;/th&gt;
          &lt;th width="11%" class="image"&gt;Image&lt;/th&gt;
  
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;/table&gt;
      &lt;div id="tableqanda_onthefly_container"&gt;
      &lt;table id="tableqanda_onthefly" cellpadding="0" cellspacing="0"&gt;
      &lt;tbody&gt;
          &lt;tr class="tableqandarow"&gt;
  &lt;td width="5%" class="questionno"&gt;1&lt;/td&gt;
  &lt;td width="27%" class="question"&gt;What is a RAM?&lt;/td&gt;
  &lt;td width="7%" class="option"&gt;A-E&lt;/td&gt;
  &lt;td width="11%" class="imagetd"&gt;&lt;ul class="qandaul"&gt;&lt;li&gt;Lighthouse_4.jpg&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="tableqandarow"&gt;
  &lt;td width="5%" class="questionno"&gt;2&lt;/td&gt;
  &lt;td width="27%" class="question"&gt;Name 3 car maneuvers you may do in a test?&lt;/td&gt;
  &lt;td width="7%" class="option"&gt;A-F&lt;/td&gt;
  &lt;td width="11%" class="imagetd"&gt;&lt;ul class="qandaul"&gt;&lt;li&gt;Tulips_3.jpg&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;
  &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Below is css:</p>
  
  <pre><code>#tableqanda_onthefly_container
  {
      width:100%;
      overflow-y: scroll;
      overflow-x: hidden;
      max-height:500px;
  }
  
  #tableqanda_onthefly
  {
      width:100%;
      overflow:scroll;
      clear:both;
  }
  
  #tableqanda_onthefly td
  {
      border:1px black solid;
      border-collapse:collapse;
  }
  
  #tableqanda, #tableqanda_onthefly{
      border:1px black solid;
      border-collapse:collapse;
      table-layout:fixed;
      word-wrap:break-word;
  }       
  
  #tableqanda{
      width:100%;
      margin-left:0;
      float:left;
  }
  
  #tableqanda td { 
      vertical-align: middle;
      border:1px black solid;
      border-collapse:collapse;
  }
  
  #tableqanda th{
      border:1px black solid;
      border-collapse:collapse;
      text-align:center;
  }
  
  .tableqandarow{
      border:1px black solid;
      border-collapse:collapse;
  }
  </code></pre>