CSS: Fix row height

Question

I'm having this markup:

<style>
    table
    {
        border:1px solid black;
        width:400px;
        height:300px;
        border-collapse:collapse;
    }
    table tbody
    {
        border:1px solid red;
    }
    table td
    {
        background:yellow;
        padding:10px;
        border-bottom:1px solid green;
        height:20px;
    }
</style>


<table>
<tbody>
    <tr><td>test</td></tr>
    <tr><td>test</td></tr>
</tbody>
</table>

What I need is that the rows won't stretch in height. Is there a way to have a fixed row height?

What do you want to do with content that's taller than the fixed row height? — Lior Cohen, Nov 27 '09 at 01:23
@tad: min-height does the exact opposite of what he asked for. Also note that max-height does not work correctly under certain circumstances under IE8 unless you are using compatibility mode: http://edskes.net/ie8overflowandexpandingboxbugs.htm — diadem, Dec 22 '10 at 21:59
table > tbody:after { clear: both; content: ''} Try this as well. ^ Worked for me. — Pangamma, Jun 07 '21 at 20:59

score 33 · Answer 1 · edited Oct 22 '12 at 15:58

33

HTML Table row heights will typically change proportionally to the table height, if the table height is larger than the height of your rows. Since the table is forcing the height of your rows, you can remove the table height to resolve the issue. If this is not acceptable, you can also give the rows explicit height, and add a third row that will auto size to the remaining table height.

Another option in CSS2 is the Max-Height Property, although it may lead to strange behavior in a table.http://www.w3schools.com/cssref/pr_dim_max-height.asp

.

edited Oct 22 '12 at 15:58

Mack

2,556
1
26
44

answered Nov 27 '09 at 02:18

PortageMonkey

2,675
1
27
32

1

best. answer. hard setting the table height was causing all of my problems, removing it made for awesome. – adam.kuyrkendall Dec 22 '11 at 23:25
2

+1 for "you can also give the rows explicit height, and add a third row that will auto size to the remaining table height." – Kosta Kontos May 03 '13 at 10:35
2

Max-Height Property didn't solve the problem for me – Tarun Gupta Jan 07 '20 at 08:19

score 24 · Answer 2 · answered Oct 09 '12 at 17:35

24

Simply add style="line-height:0" to each cell. This works in IE because it sets the line-height of both existant and non-existant text to about 19px and that forces the cells to expand vertically in most versions of IE. Regardless of whether or not you have text this needs to be done for IE to correctly display rows less than 20px high.

answered Oct 09 '12 at 17:35

horseFeathers

257
3
2

This just solved my problem in Chrome 30 too, I was trying to make an take up the full size of the table cell it was in with no gaps – Erin Drummond Oct 10 '13 at 02:09
1

line-height 0 seems to make text run together if it tries to wrap: http://jsfiddle.net/6wXd8/ – Kasapo Apr 11 '14 at 17:01

score 7 · Answer 3 · answered Nov 27 '09 at 02:55

You can also try this, if this is what you need:

<style type="text/css">
   ....
   table td div {height:20px;overflow-y:hidden;}
   table td.col1 div {width:100px;}
   table td.col2 div {width:300px;}
</style>


<table>
<tbody>
    <tr><td class="col1"><div>test</div></td></tr>
    <tr><td class="col2"><div>test</div></td></tr>
</tbody>
</table>

score 5 · Answer 4 · answered Nov 27 '09 at 02:53

5

I haven't tried it but if you put a div in your table cell set so that it will have scrollbars if needed, then you could insert in there, with a fixed height on the div and it should keep your table row to a fixed height.

answered Nov 27 '09 at 02:53

James Black

41,583
10
86
166

score 0 · Answer 5 · answered Jun 26 '18 at 06:30

    
    table tbody
    {
        border:1px solid red;
    }
    table td
    {
        background:yellow;
        
        border-bottom:1px solid green;
        
        
    }
    .tr0{
        line-height:0;
     }
     .tr0 td{
        background:red;
     }

<table>
<tbody>
    <tr><td>test</td></tr>
    <tr><td>test</td></tr>    
    <tr class="tr0"><td></td></tr>
</tbody>
</table>

CSS: Fix row height

5 Answers5

Linked