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?

http://stackoverflow.com/questions/2092696/how-to-fix-height-of-tr — Jawad, Jul 15 '11 at 15:45

score 12 · Accepted Answer · answered Jul 15 '11 at 15:45

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

score 5 · Answer 2 · answered Jul 15 '11 at 15:38

5

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

answered Jul 15 '11 at 15:38

Barry Kaye

7,682
6
42
64

score 3 · Answer 3 · answered Jul 27 '16 at 10:37

3

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>

answered Jul 27 '16 at 10:37

Snehlata Shaw

97
5

1

May I ask why this was downvoted? The solution of putting a div inside the cells worked for many. Just styling the height, as proposed above, does not keep the content from expanding a td (see Jason Gennaro's fiddle). – Jan Mirus Jan 11 '17 at 09:09

aHotMan · Answer 4 · 2022-08-16T03:26:41.523

-1

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

edited Aug 16 '22 at 03:26

answered Aug 16 '22 at 03:25

aHotMan

1
2

1

using display: block will remove the table view nature of tr – Rakesh Soni Aug 21 '22 at 06:24

How to control tr height of table in CSS

4 Answers4