Table with fixed header in IE8

Question

I need some help. I tried for 2 days to make a table with tbody scrollable and I just can't find a solution.

My table is:

<table width=100% style="margin:0 0 0 -1px; border-collapse:collapse;"> <thead> <tr> <th ><input type="checkbox" id="select_all" /></th> <c:forEach items="${grid.heads}" var="element"> <th><c:out value="${element.id}"/></th> </c:forEach> </tr> </thead> <tbody style="height:200px !important; overflow: auto; display:block;"> <nested:iterate id="row" name="grid" property="data" indexId="cnt"> <tr> <td><input type="checkbox" name="list_with_checkboxes" value=<c:out value="${row[0]}"/> ></td> <nested:iterate id="element" name="row"> <td><c:out value="${element}"/> </td> </nested:iterate> </tr> </nested:iterate> </tbody> </table>

My table is rendered correctly but I can't make tbody scrollable, because I don't know why tbody have another height then 200px.

Any ideas? Thanks a lot!

Community · Accepted Answer · 2017-05-23 12:12:43Z

1

There seems to be lots of answers to this already

Table tbody scroll in IE8

How can I let a table's body scroll but keep its head fixed in place?

<th style="width:0px;"></th>

This existing fiddle seems to solve it but check out the other suggestions in the links above- http://jsfiddle.net/venkateshwar/X8FSw/17/show/

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Nov 26, 2013 at 12:47

grimmus

5236 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aditzu Over a year ago

I read all the answers but nothing helped me. The main idea is how to make a tbody scrollable. I will take a look at your links also. Thanks!

grimmus Over a year ago

Look at the source of the fiddle. There is an extra row with a width of 0 added in to help it in IE8. Might be worth copying source and styles and modifying to suit your needs.

Black Ops · Accepted Answer · 2013-11-26 12:34:29Z

how about you make 2 tables, the first table only contains the thead

 <table> <thead> <th>HEADER</th> </thead> </table> <div style="height:200px !important; overflow:scroll;"> <table> <tbody> </tbody> </table> </div>

I can't do that because table is generated dynamic and the header it will not be aligned with body. I already tried that.

Collectives™ on Stack Overflow

Table with fixed header in IE8

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related