html - Table tbody scroll in IE8

Question

In my project, I am trying to make the tbody scroll in IE8. I know it can be scrolled by just giving overflow: auto to tbody. But this doesn't work in IE8. To make it work in IE8, the tbody must be given position: absolute (or float: left to both thead and tbody). If I make the overflow: auto work then the widths which I assigned to the th and td in percentages is being ignored. which in turn not letting the tr to occupy the full width in thead and tbody. Hence, there is a irritating space between tr and tbody/thead.

Please test this demo in IE8. (works fine in firefox and chrome)

and here is the code in fiddle.

Here are the strict points which I can't change

• Width to td and th must be in percentages.
• I can't change HTML markup
• It must be solved using just CSS.

Actually, I did solve it with a dirty fix which is as follows

th:after,td:after{ /* only to the last column, first occurence */
    content: "...................................................";
    visibility: hidden;
}

The above code can also be checked by giving many dots to a specific td/th in developer tools

The above code looks ok but I need to give the :after pseudo selector only to the first row last column th and tr. If I give to every th and tr then the layout is messing up. and also the dots must be increased if the empty space between the tr and tbody is more. Then ofcourse this could be achieved only dynamically which I can't do in my current project.

PS: I maybe doing it completely wrong. I am just sharing my efforts where I reached very close to the result.

Answer 1

I found two ways to solve this problem in IE8.

       1)   Adding extra td element of width: 0px to tr's of thead and tbody.

IE8 demo

       2)   Adding a hidden letter to content of after pseudo selector.

    tr:after{
        content: ".";
        visibility: hidden;
    }

I added the above in conditional css. because the problem was only in IE8. (I haven't tested in IE9+)

    <!--[if IE 8]>
         <style>
             /* the above css code here */
         </style>
    <![endif]--> 

IE8 demo

I used the latter one because it is simple.