Question

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.

Answer 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