Using CSS in tables...help

[TurboSmoke]

I need help to set the height of a table or table data.

if i have a table like this

<table>
<tr><td>some info</td>
<td>longer info, longer info</td>
</tr>
</table>

basically its a table with one row and two cells side by side.

how do i get both the cells to be of the same height regardless of thier content. i.e if one has a lot more than the other. The one with less content will have space between the data and the bottom table border.

even if i have 10 cells all side by side containing different data lengths, i need them to all be on one uniform height, such as 200px.

it must be do-able with css....but i have tried everything.

 

[Shannon]

Originally posted by TurboSmoke
I need help to set the height of a table or table data.

if i have a table like this

<table>
<tr><td>some info</td>
<td>longer info, longer info</td>
</tr>
</table>

basically its a table with one row and two cells side by side.

how do i get both the cells to be of the same height regardless of thier content. i.e if one has a lot more than the other. The one with less content will have space between the data and the bottom table border.

even if i have 10 cells all side by side containing different data lengths, i need them to all be on one uniform height, such as 200px.

it must be do-able with css....but i have tried everything.

.mytable {
      height: 200px;
      }

That should constain the table (including cells) to what ever height you choose. But for arguement's sake:

.mytable {
      height: 200px;
      }

table.mytable tr td {
      height: 200px;
      }

Then to your actual HTML table tag:

<table [color=red]class="mytable"[/color]>
  <tr>
    <td>Blah Blah</td>
    <td>Blah Blah Blah</td>
  </tr>
</table>

The .mytable class assigns a height of 200px to whatever it is applied to.
table.mytable tr td assigns a height of 200px to any <td> that is the child of a <tr> that is the child of a <table> with a .mytable class. Of course you can change mytable to what ever you want.

 

[TurboSmoke]

cheers mate...

i was trying something similar with

.mytable {height: 200px;}

then using it thus:

<table><tr><td class="mytable">...blah...</table>

needless to say, it didnt work...

i will try your solution..

 

[TurboSmoke]

okay, that worked beautifully...

now i have another question.

if one cell has a random amount of data in it...it could be a lot or it could be hardly any, how do i get the other cell to resize itself to the same height as the other?

i tried:


.mytable {
height: 100%;
}

but it doesnt work..

basically i want the two cells to be the same height without restricting them to an exact height in px.

 

[Shannon]

Originally posted by TurboSmoke
okay, that worked beautifully...

now i have another question.

if one cell has a random amount of data in it...it could be a lot or it could be hardly any, how do i get the other cell to resize itself to the same height as the other?

i tried:


.mytable {
height: 100%;
}

but it doesnt work..

basically i want the two cells to be the same height without restricting them to an exact height in px.

To do that you just don't apply a height to the table. The cells will automatically adjust depending on how much data they hold. The two cells will always be the same height, as cells in a row have to be the same height as each other.

Assigning a height percentage to an object will just make it a certain percentage of its parent. Say your table is in a div layer that is 600px high, and you set your table to height: 100%;, the table will then be 600px high. If you set the height of the <td> to 100%, it'll be the height of the table holding it. You get the idea?

 

[TurboSmoke]

yes, i realise that but i am dealing with something a little more complex...can i send you the site via PM and you can have a quick glance at it?

 

[Shannon]

Originally posted by TurboSmoke
yes, i realise that but i am dealing with something a little more complex...can i send you the site via PM and you can have a quick glance at it?

Okay.