CODEWITHSUNDEEP
htmlcsshtml-table
mrip
mrip

Reputation: 15163

Controlling row heights precisely in an HTML table

For an HTML table, I've found that if I set

table{
    table-layout: fixed;
    width: 0;
}

I can then specify the widths of each column in the col elements, and they will be respected, i.e. cells can't increase the width of a column, instead they have to deal with overflow.

Is there any way to do the same for row height? What I want to do is be able to specify the row height in each tr element, and then individual cells can't make it any taller, they just have to deal with vertical overflow if their content wants to be larger.

Upvotes: 1

Views: 35

Answers (1)

Maik Lowrey
Maik Lowrey

Reputation: 17566

Simply add line-height:nPX to each td. In my example i truncat long text for better readability.

table {
  table-layout: fixed;
  width: 200px; 
}

table td {
   line-height: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;  
}
<table border="1">
  <tr>
    <td> 1 Lorem ipsum</td>
    <td>Lorem ipsum Lorem ipsum Lorem ipsum</td>
  </tr>
  <tr>
    <td>2 Lorem ipsum</td>
    <td>Lorem ipsum Lorem ipsum Lorem ipsum</td>
  </tr>  
</table>

Upvotes: 1

Related Questions