Search code examples
csstablerowcss-tables

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?

Solution

  • 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