css: fix row height

Question

hi all,

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? thx.

Answer 1

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/Css/pr_dim_max-height.asp

.

Answer 2

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.

Answer 3

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>