How to control tr height of table in CSS

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?

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

You need to set the height or line-height of your TD's or TH's within your TR.

It's better to have a div element inside td element and fix the height of div element. It worked for me.

 <tr>
    <td>
       <div style="max-height:92px;">
         <span style="color: #992222; font-size:36pt;font-family:Arial Baltic;">
         "     </span>
       </div>
   </td>
 </tr>

You can make the height smaller by changing the display. by default it is display : table , Change it to display : block for example and it should work