0

why does html elements have the max-height attribute if they are not going to follow it. For example I have the table:

<table  border="2" style="table-layout:fixed; max-height:20px;">
    <tr style="height:20px;">
        <td style="overflow:hidden; max-height:20px; overflow:hidden;">
            <img id="book" src="img/capture.png" alt="" style="position:relative; margin-top:0px;" />
        </td>
    </tr>
</table>

and if the img happens to have a height greater than 20px the table row's height will not equal 20px. How can I tell html that I want the table row to have a height of 20px?

Edit:

I know I can change the img height but I don't want to distort the img.

Tono Nam
  • 34,064
  • 78
  • 298
  • 470

2 Answers2

1

This likely has to do with the fact that td isn't display:block, but actually display:table-cell. I don't think display table-cell supports max-height.

Is there a reason you don't want to set the height on the <img> tag?

See also: Setting max-height for table cell contents

Community
  • 1
  • 1
T. Stone
  • 19,209
  • 15
  • 69
  • 97
1

The table element is flexible enough to resize and accommodate it's content. It really isn't constraint by any max-heights.

Roman
  • 10,309
  • 17
  • 66
  • 101