how to change table row height in CSS > for all browsers

[royroi]

I need a CSS style=".." the make the changes for row height in IE and firefox as well, anyone knows?

[the_pm]

This seems to work :)

<table border="1">
<tr style="height:300px">
<td>Foo</td>
<td>Bar</td>
</tr>
</table>

[royroi]

didn't work for me, I tried 3px height. (not in IE6 and not in firefox.. .)

[the_pm]

Three pixels isn't very much. What are you seeing that's undesirable?

I'll look at this thread again in a few hours. It's sleepytime :)

[royroi]

ok,
I need the 3 pixels height..

[the_pm]

Perhaps you missed this part of the post :)

What are you seeing that's undesirable?

Just replacing 300px with 3px should be all you need to make it three pixels tall. What are you putting in table cells that's only three pixels tall anyway?

[royroi]

it's simply doesn't effect the table when it's only 3px (and that's what I need.. )

[Gerrit]

Roy, why don't you tell why you need a 3px height instead of repeating that you need it. Also, give a link to where the project can be seen. That way we can see what's going on,test something and maybe come up with a solution for your problem.

[royroi]

I can't give a link
what's so difficult? if it's possible, cool, if no, tell me. I know there are other ways to solve everything, but I am asking about 3px height for a row.

[Jamie]

It is possible to have a row with a height of 3px. If using "<tr style="height:3px">" isn't working, then there is something else on the page which is effecting it. To find out what is effecting it so we can tell you how to fix it, we need to see the full page.

[Gerrit]

It's not difficult - the code the_pm gave you works. Obviously it doesn't work for you. So the only way something can be done is with some more information from your side..

[the_pm]

If you'd like to give me a link privately, I can take a look at it without you having to publish something before you're ready to do so :)

[Gerrit]

Ok Roy, I've been playing with your 3px rows a little.

Look here: http://newbies.ws/royroi/table.html

First row: No height specified. The height is automatically adjusted to the content.

Second row: Height 3px and empty cells --> displays a 3px high cell in all browsers.

Third row: Height 3px Because I put text in the cells, the height automatically adjusts to the text height requirement.

Fourth row: Height 3px cell contents &nbsp;. This is treated like a character and the height is adjusted to the standard font size.

Fifth row: Height again 3px. I specified a very small font size for the cells (0.0001em) and entered 'text' in the cells. FF renders the height to 3px; IE (6 and 7) add 2 px.

Sooo... A row height of 3px is possible, but don't put text in or or IE will screw things up. Alternatively you can put a 3 px high image in the cells.

[Still wondering what you want to achieve :)]

[kk5st]

I can't give a link
what's so difficult? if it's possible, cool, if no, tell me. I know there are other ways to solve everything, but I am asking about 3px height for a row.
First, a couple of technical thingies. A table cell, td, cannot have a truly fixed size. A table cell always encloses it content. For that reason, "The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's specified 'height' and the minimum height (MIN) required by the cells."[1] (emphasis added)

No table layout adheres strictly to the height and width attributes, or to the height and width css properties because of the requirement for enclosure of data. See http://www.w3.org/TR/html4/struct/tables.html for the html rules, and http://www.w3.org/TR/CSS21/tables.html for the css rules.

You were asked what you're trying to accomplish. You answered rather snottily. See above. So I'll answer your question. No. Had you shown a modicum of clue, you would have asked for help toward accomplishing your goal, rather than asking how to do what you've decided was the solution. If you really knew what the solution was, you wouldn't have had to ask.

So, what was that 3px tall tr supposed to do for you?

gary

[1] http://www.w3.org/TR/CSS21/tables.html#height-layout

[rremus]

I also am new to this but found this useful - why 3px?
I have a form that includes a table :shock:. I decided to create a top row with many empty elements, subsequent rows would use the colspan as needed to position elements with in the table row. The 3px height would make the empty top row almost invisible.

I thought that this would be the quickest and cleanest way to get what I was looking for. I have not tried the code yet, but wanted to say thank you for the suggestions. - oh, Thank you :D

[Longmein]

Thanks for sharing such a useful information, guys