2

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>
2
  • 1
    position: relative;display:block; are not valid values for tr elements. Not sure whether that's the reason of your problem, but it might certainly account for strange behaviour Commented Nov 11, 2010 at 11:12
  • They are valid values, but at least display:block doesn't make sense in this context. Commented Nov 11, 2010 at 11:19

1 Answer 1

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.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.