CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer-8
Aditzu
Aditzu

Reputation: 706

Table with fixed header in IE8

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!

Upvotes: 0

Views: 4484

Answers (2)

grimmus
grimmus

Reputation: 513

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/

Upvotes: 1

Black Ops
Black Ops

Reputation: 374

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>

Upvotes: 1

Related Questions