How to control table height

**clareto** · 11-24-2005 07:01 PM

Does anybody know how to make a cell fill all the vertical space available?

Code:

 
<html>
<style type="text/css">
.bordered {border: #ff0000 solid 1px;}
</style>
<body>
<!-- frame table with 3 cols-->
<table width=350 border=1 bordercolor="#808000" cellpadding=0 cellspacing=0>
<tr>
<!-- col1 -->
<td width=34%>
	 <!-- THIS ONE -->
	 <table width=100% height=100% cellpadding=0 cellspacing=0>
		 <tr><td>header1</td></tr>
		 <tr><td class="bordered" height=100%>Lorem ipsum dolor</td></tr>
	 </table>
 
</td>
<!-- col2 -->
<td width=33%>
	 <table width=100% height=100% cellpadding=0 cellspacing=0>
		 <tr><td>header2</td></tr>
		 <tr><td class="bordered">
			 this<br>is<br>a<br>paragraph<br>wich<br>spans
			 <br>vertically<br>.<br>It<br>forces<br>the<br>frame<br>
			 table<br>to<br>grow<br>vertically.
		 </td></tr>
	 </table>
</td>
<!-- col3 -->
<td>
	 <!-- THIS ONE-->
	 <table width=100% height=100% cellpadding=0 cellspacing=0>
		 <tr><td>header3</td></tr>
		 <tr><td class="bordered">
			 Do you know how to make this cell grow vertically to match the size of the biggest column?. 
		 </td></tr>
	 </table>
</td>
</tr>
</table>
 
</body> 
</html>

What i need is to make the tables labeled  fill all the vertical space available, so the red borders match.

Cells with text contain dynamic text, so I can't use fixed heights, and its unknown which will be the most big cell.

Please help me, and pray for Corey and all the work he's going to do this weekend.

**Bryon** · 11-24-2005 08:23 PM

[Thought]
You should, while your still learning, switch to using CSS to fully control the apperance of HTML instead of attributes in HTML tags.
[/Thought]

Anyways, here you go:

Code:

<html>
<head>

<style type="text/css">
.bordered {border: #ff0000 solid 1px;}
</style>
</head>
<body>

<!-- frame table with 3 cols-->
<table width="345" height="400" border="1" bordercolor="#808000" cellpadding="0" cellspacing="0">
<tr>
<!-- col1 -->

<td width="115" valign="top">
	 <!-- THIS ONE -->
	 <table width="100%" cellpadding="0" cellspacing="0">
		 <tr><td>header1</td></tr>
		 <tr><td class="bordered" height=100%>Lorem ipsum dolor</td></tr>
	 </table>
 
</td>
<!-- col2 -->
<td width="115" valign="top">
	 <table width="100%" cellpadding="0" cellspacing="0">
		 <tr><td>header2</td></tr>
		 <tr><td class="bordered">
Yes it does force the table cell down, doesn't it?
		 </td></tr>
	 </table>
</td>
<!-- col3 -->
<td width="115" valign="top">
	 <!-- THIS ONE-->
	 <table width="100%" cellpadding="0" cellspacing="0">
		 <tr><td>header3</td></tr>
		 <tr><td class="bordered">
			 Do you know how to make this cell grow vertically to match the size of the biggest column?. 
		 </td></tr>
	 </table>
</td>
</tr>
</table>
 
</body> 
</html>

The attribute valign="" controls what you are looking for. I do want to say though, is if you give each "sub" table a height, it will stretch the "Header" part of it along with the "content" part of it so the table stretches to the amount you gave it. To stop it from doing that, add a static height to the "Header" table cells.

Also, you should attempt to mostly stay away from percentage table dimensions. Exact pixel dimensions are a lot easier to keep track of, and will always be the same. (Which can greatly help in aligning issues you might come across). Whatever floats your boat though, that is just my opinion.

Edit: So if you want the sub table's to completly fill up the table holding it, set the height to 100%, and set the "Header" cell's height to a static value, such as 10.

Code:

	 <table width="100%" height="100%" cellpadding="0" cellspacing="0">
		 <tr><td height="10">header2</td></tr>
		 <tr><td class="bordered">
Yes it does force the table cell down, doesn't it?
		 </td></tr>
	 </table>

Any problems/questions, just ask.

Adios,
-Nedren

**clareto** · 11-25-2005 04:26 PM

mmm thanx 4 da help, but.. no, it doesnt forces the cell down. the subtable doesnt fills all the space. I think there should be a way to do it, cause if you make a 100% width and height table after the body tag, it fills all the browser canvas. But if you make a 100% width and height table, nested in another table, it refuses to fill the space. I Really dont understand that behavior. I've tryed to change the table by a <div height=100%>. It doesnt works. <div style="height: 100%> doesnt works.

**Bryon** · 11-25-2005 06:38 PM

Arggg I explained how to make it fill the space. :-D Did you not even read what I said? I teach people why things do what they do, and try to explain things, I don't just "do things" for people.

Code:

<html>
<head>

<style type="text/css">
.bordered {border: #ff0000 solid 1px;}
</style>
</head>
<body>

<!-- frame table with 3 cols-->
<table width="345" height="400" border="1" bordercolor="#808000" cellpadding="0" cellspacing="0">
<tr>
<!-- col1 -->

<td width="115" valign="top">
	 <!-- THIS ONE -->
	 <table width="100%" height="100%" cellpadding="0" cellspacing="0">
		 <tr><td height="10">Header 1</td></tr>
		 <tr><td class="bordered" valign="top"">Lorem ipsum dolor</td></tr>
	 </table>
 
</td>
<!-- col2 -->
<td width="115" valign="top">
	 <table width="100%" height="100%" cellpadding="0" cellspacing="0">
		 <tr><td height="10">Header 2</td></tr>
		 <tr><td class="bordered" valign="top">Yes it does force the table cell down, doesn't it?</td></tr>
	 </table>
</td>
<!-- col3 -->
<td width="115" valign="top">
	 <!-- THIS ONE-->
	 <table width="100%" height="100%" cellpadding="0" cellspacing="0">
		 <tr><td height="10">Header 3</td></tr>
		 <tr><td class="bordered" valign="top">Do you know how to make this cell grow vertically to match the size of the biggest column?. </td></tr>
	 </table>
</td>
</tr>
</table>
 
</body> 
</html>

**clareto** · 11-26-2005 10:47 AM

Oh yeah!, lots of tnx NedreN!. I've decided to set the 'main' table height to 1px and it works, but I dont know if next browser's version will take the property "1px" as literal. I think its a little 'dirty' my solution... but it even works!!

thanx again

Thread: How to control table height

LinkBack

Thread Tools

Display

How to control table height

Re: How to control table height

Re: How to control table height

Re: How to control table height

Re: How to control table height

Similar Threads

Table left, image right.

Outside access to MySQL table

[IPB] Contiguous Board Index

I need my Control Panel info

Table inside table

Posting Permissions