11

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?

2

4 Answers 4

13

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

5

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

0
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>
1
  • 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, 2017 at 9:09
-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

1
  • 1
    using display: block will remove the table view nature of tr Aug 21, 2022 at 6:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.