How to control tr height of table in CSS

Question

I try to reduce the white space between each tr in a table.

I have set "table id='recTable' cellspacing=\"0\" cellpadding=\"0\"", that means there is no space between each tr(comfirmed). So what only I need to do is reduce the height of tr itself.

I used "height:40px;" for doing this, but it doest work, no change.

It always shows a 70px height. But if I set a big height like "height:100px;", which the height is more than 70px, then it will change to the height I set.

How can I do it?

Answer 1

You can set this explicitly in your css. For example:

table#recTable{width:100%; border:1px solid red;}
#recTable tr td {height:40px; border:1px solid red;}

HTML

<table id="recTable">
    <tr><td>Something</td></tr>
    <tr><td>Something else</td></tr>
</table>

http://jsfiddle.net/jasongennaro/qXpLM/

Borders just for example