title: Table tbody scroll in IE8
body: <p>In my project, I am trying to make the <code>tbody</code> scroll in IE8. I know it can be scrolled by just giving <code>overflow: auto</code> to <code>tbody</code>. But this doesn't work in IE8. To make it work in IE8, the <code>tbody</code> must be given <code>position: absolute</code> (or <code>float: left</code> to both <code>thead</code> and <code>tbody</code>). If I make the <code>overflow: auto</code> work then the widths which I assigned to the <code>th</code> and <code>td</code> in percentages is being ignored. which in turn not letting the <code>tr</code> to occupy the full width in <code>thead</code> and <code>tbody</code>. Hence, there is a irritating space between <code>tr</code> and <code>tbody</code>/<code>thead</code>.</p>
  
  <p>Please test this <a href="http://jsfiddle.net/venkateshwar/X8FSw/3/embedded/result/" rel="noreferrer"><strong>demo</strong></a> in IE8. (<em>works fine in firefox and chrome</em>)</p>
  
  <p>and here is the code in <a href="http://jsfiddle.net/venkateshwar/X8FSw/3/" rel="noreferrer"><strong>fiddle</strong></a>.</p>
  
  <p>Here are the strict points which I can't change</p>
  
  <ul>
  <li>Width to <code>td</code> and <code>th</code> must be in percentages.</li>
  <li>I can't change HTML markup</li>
  <li>It must be solved using just CSS. </li>
  </ul>
  
  <p>Actually, I did solve it with a dirty fix which is as follows</p>
  
  <pre class="lang-css prettyprint-override"><code>th:after,td:after{ /* only to the last column, first occurence */
      content: "...................................................";
      visibility: hidden;
  }
  </code></pre>
  
  <p><em>The above code can also be checked by giving many dots to a specific td/th in developer tools</em></p>
  
  <p>The above code looks ok but I need to give the <code>:after</code> pseudo selector only to the first row last column <code>th</code> and <code>tr</code>. If I give to every <code>th</code> and <code>tr</code> then the layout is messing up. and also the <code>dots</code> must be increased if the empty space between the <code>tr</code> and <code>tbody</code> is more. Then ofcourse this could be achieved only dynamically which I can't do in my current project. </p>
  
  <p>PS: <em>I maybe doing it completely wrong. I am just sharing my efforts where I reached very close to the result</em>.</p>