Table Cell height issue

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Table Cell height issue

Post by iknownothing »

Hey guys,
I have a table, where there is 3 td's below each other and one larger one next to them with rowspan="3". Could anyone tell me why the individual td heights on the 3 on the side (the top 2 are specific heights, and the 3rd continues) are ignoring their specified height? The problem only occurs in IE.

Code: Select all

<tr>
     <td height="100"></td>
     <td colspan="3"></td>
</tr>
<tr>
     <td height="100"></td>
</tr>
<tr>
     <td></td>
</tr>
The IE effect would look something like this:

Code: Select all

<tr>
     <td height="250"></td> //Suposed to be 100px
     <td colspan="3"></td>
</tr>
<tr>
     <td height="130"></td>  //Suposed to be 100px
</tr>
<tr>
     <td></td>
</tr>
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

The table cells are probably growing because of their content. By default, table cells will a) expand to fit their contents, then b) expand to whatever size you want, provided that size isn't smaller than what's necessary for a). I've never personally needed to do this, but I believe if you use CSS & set the height as well as the "overflow" property to "hidden", it might work:

Code: Select all

.td{
   height:100px;
   overflow:hidden;
}
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply