how to resize the height of colum in a table according to the content?

[Emiliya]

Hi all...

I have 3 table columns. Columns 1 and 3 have different colored backgrounds. Column 2 is white background and contains the content.

I want the heights of columns 1 & 3 to increase according to the height or the amount of content in column 2.
Thanks in advance..

[Luckychap]

use css:

height:auto;

[Emiliya]

Thanks for the reply..but my requirement is i want column 1 and 3 to b of fixed height, and the height of all 3 columns must be equal tot he column with max height.In this case height:auto wont work out.

http://www.w3.org/TR/CSS2/tables.html

[fxm]

Are the cells in columns 1 and 3 all empty? Or can they have content? If they can, could the content of any column 1 or column 3 cell be taller than the content of the column 2 cell in the same row?

Can the rows vary in height? Or do they all have to be equal?

[Emiliya]

Columns 1 and 3 are not empty,they have content in them.But they are of fixed height.Column 2's content can vary .its height can be less than those of 1 and 3 or greater than 1 and 3.

[gurpreet_ka]

you can use "style= overflow: hidden" for column 2. With this all the columns will have same height.

i have not tried it.

[fxm]

OK. So, when the cell in column 2 of a certain row is - let's say - one line of text, and the cells in columns 1 and 3 on the same row are - for example - 10 lines of text, what should happen?

[Emiliya]

In that case all the 3 columns' height should be of equal to the height of the column containing 10 lines of text.

[fxm]

A. that is the opposite of what you asked for originally
B. what you are now asking for is what tables ordinarily do - provided that no element in the table specifies a height [directly or indirectly], the presentation in all browsers should automatically adjust the height of each row to the height of its content

[Taywin]

I am guessing you are putting 3 tables into either div or another table; as a result, those 3 tables inside each column would display in different height. There is a way to fix this, but it will require getComputeStyle() to obtain all three tables' height, and then apply it using JavaScript via table.style.height. IE and FF have different way of calling getComputeStyle(). Can't remember on the top of my head about how different they are, but not much. If the height needs to be adjusted at 'onload', then put your function in onload; otherwise, put it whenever you want your table height to be adjusted.

The steps you need to do in your function are somewhat as followed:

1)Create local variables for each table and obtain the DOM objects (could use getElementById() which is the best way to do)
2)Obtain each table's height via getComputeStyle() (one example can be found here)
3)Find the max value of all three
4)Set all table.style.height to the max value from comparing values

That should do it. I guess the only part you are missing right now is the #2. Good luck.

[I'mHere]

I hope this will help..
the content of column 1 and 3 will always be presented at the middle as you add content to column 2 but you can still position it the way you desired through CSS Position property or something

table bgcolor="gold"><tr>
<td><table><tr><td bgcolor="green">
Column 1
</td></tr></table></td>
<td><table><tr><td bgcolor="blue">Column 2 you can input text here
</td></tr></table></td>
<td><table><tr><td bgcolor="green">Column 3</td></tr></table></td>
</tr></table>