title: Setting max-height for table cell contents
body: <p>I have a table which should always occupy a certain percentage of the height of the screen. Most of the rows are of fixed height, but I have one row that should stretch to fill the available space. In the event that the contents of a cell in that row overflows the desired height, I'll like the contents to clip using overflow:hidden.</p>
  
  <p>Unfortunately, tables and rows do not respect the max-height property. (This is in the W3C spec). When there is too much text in the cell, the table gets taller, instead of sticking to the specified percentage.</p>
  
  <p>I can get the table cell to behave if I specify a fixed height in pixels for it, but that defeats the purpose of having it automatically stretch to fill available space.</p>
  
  <p>I've tried using divs, but can't seem to find the magic formula. If I use divs with display:table, :table-row, and :table-cell the divs act just like a table.</p>
  
  <p>Any clues on how I can simulate a max-height property on a table?</p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
          table {
              width: 50%;
              height: 50%;
              border-spacing: 0;
          }
          td {
              border: 1px solid black;
          }
          .headfoot {
              height: 20px;
          }
          #content {
              overflow: hidden;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;
      &lt;tr class="headfoot"&gt;&lt;td&gt;header&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
          &lt;div id="content"&gt;
              put lots of text here
          &lt;/div&gt;
          &lt;/td&gt;
          &lt;tr&gt;
      &lt;tr class="headfoot"&gt;&lt;td&gt;footer&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>