Link to home
Start Free TrialLog in
Avatar of maaknplan
maaknplanFlag for South Africa

asked on

CSS - table and image height issue

Hi

I have a table, and one of the columns displays a preview to a document. The preview is about 1000px in height, but I want the row to be limited to 100px in height, and the user can scroll to see the rest of the preview, or just click on the link to open the document in Word Online.

With the samples below, the row height keeps adjusting to fit the whole image.

Any help is greatly appreciated.

Here is a link to my sample on w3schools

Here is the HTML I am using:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}

ex1 {
    max-height: 50px;
    overflow: auto;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr >
    <td class="ex1"><img src="https://www.clicktorelease.com/tmp/google-svg/image.svg" height="250px"/></td>
    <td >$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>


</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Jan Louwerens
Jan Louwerens
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of maaknplan
maaknplan
Flag of South Africa image

ASKER

Thanks Jan, your solution works great.