cell with fixed or variable dimensions: is it possible to control it?

Davide77 · Apr 16, 2004

General description:
How to create a table where some cells have invariable dimensions (height and width) and other cells can change their dimensions depending on the content of the table.

Actual problem:
I have a 3x3 table. In the first collumn two of the three cells are merged (the two lowest). In this area (merged cells) I write some text that can change (sometimes is longer sometime shorter). The problem appears in the other two collumns: i want the top and the bottom cells to mantain their dimensions and the middle one to be able to change its dimnesion depending on the lenght of the text. But... obviously the one who change its height is the middle one. Even though for all the other cells I specified the height and for the middle cell I didn't. I also tried with 100% in the middle-cell height but still is the bottom-cell that changes height. Do you have any idea?

Here is the code of the table:

Code:

<table border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td width=400 height=25 bgcolor="#CCCCCC"></td>
    <td width=30 height="25"></td>
    <td width=300 height="25" bgcolor="#CCCCCC">the height of this cell shouldn't change</td>
  </tr>
  <tr> 
    <td rowspan="2" bgcolor="#999999" width="400">
      <p>here</p>
      <p>goes</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>the</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>text</p>
      </td>
    <td width="30"></td>
    <td width="300" bgcolor="#FF0000" height="100%">This cell should adapt</td>
  </tr>
  <tr> 
    <td width="30" height="25"></td>
    <td width="300" height="25" bgcolor="#CCCCCC">the height of this cell shouldn't change</td>
  </tr>
</table>

Thanks for suggestions

vongrunt · Apr 16, 2004

Without height=100% works OK in mozilla (ff 8.0).
IE is another story. For each TD rowspan it ignores all dependent TD heights.

pixl8r · Apr 16, 2004

You can do this by using a nested table. See below. You will have to adapt this to meet your needs. Notice the use of "pix.gif" instead of cell heights. This will insure that the cell will not collapse in browsers that do not support height.

Code:

<html>
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td width=400 height=25 bgcolor="#CCCCCC"></td>
    <td width=30 height="25"></td>
    <td width=300 bgcolor="#CCCCCC"><img src="images/pix.gif" height=25 width=1><!--the height of this cell shouldn't change--></td>
  </tr>
  <tr> 
    <td rowspan="2" bgcolor="#999999" width="400">
      <p>here</p>
      <p>goes</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>the</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>text</p>
      </td>
    <td width="30"></td>
    <td valign=top>
		<table cellpadding=0 cellspacing=0 border=0 width=300>
			<tr>
				<td bgcolor="#ff0000">This Cell Should Adapt. <br>Nostrud dolor lobortis magna esse consequat lobortis dolor vel duis consequat tation praesent esse vel delenit eros iriure. Wisi ut, illum facilisi ex consectetuer dolor dolore eu nisl augue nibh eu, te iusto. Et, dolore eros ut ad te diam consectetuer facilisis. Nonummy delenit aliquip laoreet at ut quis molestie facilisi iusto aliquam quis, facilisi velit hendrerit et ut te. Vulputate, eu autem eros ullamcorper, suscipit autem. Enim facilisis dignissim ad vel esse ad ad commodo vel facilisis. Facilisi suscipit feugiat, lorem ullamcorper, laoreet vulputate ea ullamcorper eum duis delenit esse nostrud qui vulputate. Suscipit, ut at amet. Luptatum erat molestie feugait ut sit lorem vel illum ullamcorper zzril diam illum duis accumsan. Praesent augue enim, euismod ut, duis elit sit. Commodo nulla luptatum dolore tincidunt nulla nulla minim, velit feugait accumsan dolore, minim feugait nonummy elit vero erat. Dolor ex magna consequat at exerci tation ipsum odio volutpat iusto, wisi molestie vulputate wisi wisi nulla duis, feugiat vel.</td>
			</tr>
			<tr>
				<td bgcolor="#999999"><img src="images/pix.gif" height=25 width=1>This one remains fixed</td>
			</tr>
		</table>
    </td>
  </tr> 
</table>
</body>
</html>

Hope it helps.

Wow JT that almost looked like you knew what you were doing!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

cell with fixed or variable dimensions: is it possible to control it?

Davide77

Technical User

vongrunt

Programmer

pixl8r

Programmer

Similar threads

Part and Inventory Search

Sponsor