Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Table tbody scroll in IE8

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.

like image 953
Mr_Green Avatar asked Jun 07 '13 12:06

Mr_Green


People also ask

How do I make my Tbody scrollable?

If you want tbody to show a scrollbar, set its display: block; . Set display: table; for the tr so that it keeps the behavior of a table. To evenly spread the cells, use table-layout: fixed; . Anyhow, to set a scrollbar, a display reset is needed to get rid of the table-layout (which will never show scrollbar).

How do you make a table data scrollable in HTML?

In order to make <tbody> element scrollable, we need to change the way it's displayed on the page i.e. using display: block; to display that as a block level element. Since we change the display property of tbody , we should change that property for thead element as well to prevent from breaking the table layout.

Is it necessary to have Tbody in every table?

It is mostly used when the table has multiple bodies of content. If the data in the table is easily understood to be the tbody then you can safely omit it.


1 Answers

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.

like image 159
Mr_Green Avatar answered Sep 19 '22 14:09

Mr_Green