title: css set maximum table row height despite content
body: <p>I'm trying to create a table with each cell having a fixed width but absolute but varying heights. For example in the first column the first row would be 20px, the second 65px, the third 20px. In the second column the first row would be 20px, the second 45px, the third 40px. And in the last column, the first row would be 20px and the second 85px.</p>
  
  <p><a href="https://i.stack.imgur.com/QtvYI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QtvYI.png" alt="what I want"></a>
  </p>
  
  <p>All of this works fine if the table cells are empty or large enough for the content. However, if the content is larger than what the cell accommodates, the row will expand vertically whereas I would like the extra content to be hidden.</p>
  
  <p><a href="https://i.stack.imgur.com/HBUdK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HBUdK.png" alt="what i&#39;m getting"></a>
  </p>
  
  <p>I've tried using</p>
  
  <pre><code>overflow:hidden
  </code></pre>
  
  <p>for the <code>&lt;tr</code>>, <code>&lt;td</code>>, and doing the same while placing the content within a <code>&lt;div</code>> but none appear to achieve what I'm looking for. Any ideas on how I can constrain the row height to an absolute value with any extra content hidden rather than expanding the row? I'd prefer to keep it within a table, but if it's not possible and I need to use another display technique I'm open to the idea.</p>