How to control table height

C

clareto

New Member
Messages
250
Reaction score
0
Points
0
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 <!--this one--> 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

Bryon

I Fix Things
Messages
8,149
Reaction score
101
Points
48
[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
 
Last edited:
C

clareto

New Member
Messages
250
Reaction score
0
Points
0
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

Bryon

I Fix Things
Messages
8,149
Reaction score
101
Points
48
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>
 
C

clareto

New Member
Messages
250
Reaction score
0
Points
0
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
 
You must log in or register to reply here.
Top