Question

I have a table which i specify is a certain height. I am expecting overflow and on Firefox a scroll is added and everything is fine. I have a label below my table which displayed below.

On IE7 the rows which go beyond the height of the table are still visible. So you can imagine that the table just keeps on going beyond its height size.

I think the problem is something to do with the overflow property? I have tried the different W3 ones but it doesnt seem to make a difference?

<div style='height:285px;'>
    <table id='search_results_originaltable' style='width: 390px;height:285px;'>
     <thead>
      <tr style='position: relative;display:block;'>
       <th><div style='margin-left:15px;' /></th>       <th><div style='width:30px;color:orange;'>ID</div></th>       <th style='width:170px;color:orange;'>University</th>       <th style='width:50px;color:orange;'>PnL</th>   <th style='width:40px;color:orange;'>Score</th>    <th style='width:30px;color:orange;'>CV</th>
      </tr>
     </thead>
     <tbody id='to_replace' style='overflow:hidden;height:200px;'>
      <tr style='height:auto;position: relative;display:block;'>
       <td style='width:15px;'><input type='checkbox' name='checkbox69' id='checkbox69'  value='69'></td>       <td style='width:30px;color:rgb(22,87,136);'>69</td>       <td style='font-size:10px;width:170px;color:rgb(22,87,136);'>data</td>       <td style='width:50px;color:rgb(22,87,136);'>test</td> <td style='width:40px;color:rgb(22,87,136);'>test</td>   <td style='width:40px;color:rgb(22,87,136);'><a href=javascript:ShowCV('70483') class='tab' style='width:30px;' label id='A6'>View</a></td>
      </tr>
     </tbody>
    </table>
</div>

Answer 1

You need to remove the position: relative; styling from your <tr> elements, and add overflow: auto; to the style of the containing <div>. This then renders fine on Chrome, IE7 and IE8.