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!

score 1 · Answer 1 · answered Nov 26 '13 at 12:34

1

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>

answered Nov 26 '13 at 12:34

Black Ops

384
2
16

1

I can't do that because table is generated dynamic and the header it will not be aligned with body. I already tried that. – Aditzu Nov 26 '13 at 12:42

score 1 · Accepted Answer · edited May 23 '17 at 12:12

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 '17 at 12:12

Community

1
1

answered Nov 26 '13 at 12:47

grimmus

493
5
24

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! – Aditzu Nov 26 '13 at 12:52
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. – grimmus Nov 26 '13 at 12:57

Table with fixed header in IE8

2 Answers2