How to control tr height of table in CSS

css tablerow css-tables
Kurt picture Kurt · Jul 15, 2011 · Viewed 58.8k times · Source

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

Jason Gennaro picture Jason Gennaro · Jul 15, 2011

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

Related questions

CSS table tr hover one color/border and td hover another color/border without important

I have the following fiddle. Edit: with row boarder style be applied: table,th,td { border:2px solid black; border-collapse:collapse; } tr:hover td { background-color:grey; border-top: 2px solid rgb(10, 0, 255); border-bottom: 2px solid rgb(10, 0, 255); } td:hover { background-color:rgb(214,214,214) !important; border:2…

Read More
Horizontally align table rows

Is it possible to horizontally align table rows? What most people will say: "Why do you start a new row if you want the cells to align horizontally?" My anwser: "I can't control the table structure. I just can't, okay?" …

Read More
How to show multiline text in a table cell

I want to show a paragraph from database into a table cell. The result is a large 1 line, ignoring how its organised in database. ignoring 'enters' for example (new lines) I want to show it exactly according to how it's …

Read More