Cell heights

1. Senior Member
Join Date
Dec 1969
Posts
122

## Cell heights

Hello. Let&#039;s pretend we have a table with one row and two cells. If one cell&#039;s contents are "taller" than the other cell, can I force the shorter one to be the same height? Suppose I have a different background color for each cell. Even if I set the cell heights to 100%, you can see by their bg color where the shorter one stops. If I knew my page would always be a fixed height, then I could just control height with a number. Unfortunately, my contents are dynamic, so each cell height will vary all the time.<BR><BR>My goal: With one cell having more content than the other, I want the bgcolor of the shorter cell to reach the bottom of the taller cell, keeping in mind that both cells will vary in height.<BR><BR>Does anyone have any experience addressing this?<BR><BR>Thanks!

2. Senior Member
Join Date
Dec 1969
Posts
122

## Clarification

You know what? In simplifying my question I realized there is no issue with that example. Let me add something to that. The real problem is that I have a table nested inside the shorter cell. No matter what I do setting heights to 100%, it will never make itself as tall as the taller cell. So if I have a bg color set to red in the shorter cell and the nested table&#039;s bg is white, then I see red in the gap from the bottom of the table to the bottom of the cell. So, I know both cells are actually the same height. What I really want to happen is to have that nested table take up the full height of its surrounding cell when the content of the neighboring cell is taller than my nested table contents. Any help here? Thanks

3. Senior Member
Join Date
Dec 1969
Posts
122

## Readers: Here's a sample to fix...

Can you make the white table in the first cell as tall as the second table without setting a fixed height value?<BR><BR>&#060;table&#062;<BR> &#060;tr&#062; <BR> &#060;td valign="top" bgcolor="#006666"&#062;<BR> &#060;table&#062;<BR> &#060;tr bgcolor="#FFFFFF"&#062; <BR> &#060;td&#062;blah&#060;/td&#062;<BR> &#060;/tr&#062;<BR> &#060;/table&#062;<BR> &#060;/td&#062;<BR> &#060;td bgcolor="#3399CC"&#062;&#060;p&#062;asdf&#060;/p&#062;&#060;p&#062;asdf&#060;/p&#062;&#060;p&#062;asdf&#060;/p&#062;&#060;p&#062;asdf&#060;/p&#062;&#060;/td&#062;<BR> &#060;/tr&#062;<BR>&#060;/table&#062;<BR><BR>Thanks for anyone who wants to try it out!

4. Senior Member
Join Date
Dec 1969
Posts
16,931

## RE: Readers: Here's a sample to fix...

Your issue isn&#039;t with making a cell bigger though, is it?<BR><BR>Your issue is with making it appear bigger - to fill the entire left-hand space.<BR><BR>Surely if you use CSS or HTML and use border/background colours on your cell marked "valign="top"", then you can get around this?<BR><BR>Craig.

5. Senior Member
Join Date
Dec 1969
Posts
2,885

## RE: Readers: Here's a sample to fix...

Why can&#039;t you just set the height of the table to 100%?

6. Senior Member
Join Date
Dec 1969
Posts
122

## RE: Readers: Here's a sample to fix...

Thanks for the reply. Setting the height of the table itself to 100% doesn&#039;t change anything because by default a table&#039;s height is 100% of its contents. It doesn&#039;t fill in the space of the entire surrounding cell.

7. Senior Member
Join Date
Dec 1969
Posts
122

## RE: Readers: Here's a sample to fix...

Thanks for the reply. The code I am working with is actually a lot more complex than my sample. I hope to get more replies by keeping it simple. I&#039;m not sure that CSS can make the difference because I can achieve all the border/bgcolor settings with HTML (although CSS is certainly the way to go if I can figure out the solution). The challenge is really a matter forcing a table to expand to fill up the entire cell its in when the neighboring cell is much taller than the contents of the table.

8. Senior Member
Join Date
Dec 1969
Posts
2,885

## RE: Readers: Here's a sample to fix...

No no no..... It will occupy 100% of its container. When I run this, it fills the whole cell:<BR><BR>&lt;html&#062;<BR>&lt;body&#062;<BR>& lt;table&#062; <BR> &lt;tr&#062; <BR> &lt;td valign="top" bgcolor="#006666"&#062; <BR> &lt;table height="100%"&#062; <BR> &lt;tr bgcolor="#FFFFFF"&#062; <BR> &lt;td&#062;blah&lt;/td&#062; <BR> &lt;/tr&#062; <BR> &lt;/table&#062; <BR> &lt;/td&#062; <BR> &lt;td bgcolor="#3399CC"&#062;&lt;p&#062;asdf&lt;/p&#062;&lt;p&#062;asdf&lt;/p&#062;&lt;p&#062;asdf&lt;/p&#062;&lt;p&#062;asdf&lt;/p&#062;&lt;/td&#062; <BR> &lt;/tr&#062; <BR>&lt;/table&#062; <BR>&lt;/body&#062;<BR>&lt;/html&#062;<BR><BR>

9. Senior Member
Join Date
Dec 1969
Posts
16,931

## RE: Readers: Here's a sample to fix...

Bear in mind that the "height" attribute of a table is not part of the latest standards and will be handled very differently in standards-compliant browsers.<BR><BR>Craig.

10. Senior Member
Join Date
Dec 1969
Posts
16,931

## RE: Readers: Here's a sample to fix...

e.g.<BR>http://lists.evolt.org/archive/Week-of-Mon-20020610/115064.html<BR><BR>You SHOULD be using CSS for this, you should NOT be using display markup in your HTML document.<BR><BR>Craig.

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•