CODEWITHSUNDEEP
csshtml-tablerow
Fuxi
Fuxi

Reputation: 7599

CSS: Fix row height

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?

Upvotes: 28

Views: 167182

Answers (6)

Rocky
Rocky

Reputation: 117

This method works very well for having rows with fixed height, and stop the table layout shifting. You will have to add a <tr class="auto-height"></tr> that will fill up the rest of the table for you, so your rows won't have to expand and can save their fixed height.

<table class="table" >
  <tr class="fixed-height" >
    foo1
  </tr>
  <tr class="fixed-height" >
    foo2
  </tr>
  <tr class="fixed-height" >
    foo3
  </tr>
  <tr class="auto-height" > // responsible for filling up the table
  </tr>
</table>

.table {
  height: 80vh;
}

.fixed-height {
  height: 50px; /*fixed height for table rows */ 
}

.auto-height {
  height: calc(100% - 100px); /* Remaining height assigned to a non visible row */
}

Upvotes: 0

Waruna Manjula
Waruna Manjula

Reputation: 3487

    
    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>

Upvotes: 1

PortageMonkey
PortageMonkey

Reputation: 2725

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

.

Upvotes: 36

horseFeathers
horseFeathers

Reputation: 257

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.

Upvotes: 24

jerjer
jerjer

Reputation: 8770

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>

Upvotes: 8

James Black
James Black

Reputation: 41858

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.

Upvotes: 5

Related Questions