title: Setting a max height on a table
body: <p>I am trying to design a page where there are some tables. It seems that styling tables is much more painful than it ought to be.</p>
  
  <p>The problem is the following: The tables should have a fixed height and display either white space at the bottom (when there is too little content) or a vertical scrollbar (when there is too much). Add to this that the tables have a header which should not scroll.</p>
  
  <p>As far as I know, the <code>thead</code> not scrolling is the default behaviour for tables. And a stretching <code>tfoot</code> could serve well for the purpose of filling with white space. Sadly, it seems that every constraint I can put on the table height is cheerfully ignored. I have tried</p>
  
  <pre><code>table {
      height: 600px;
      overflow: scroll;
  }
  </code></pre>
  
  <p>I have tried with <code>max-height</code>. I have tried to position the table absolutely and give both the top and bottom coordinates. I have tried to manually edit the height in Firebug to see if it was a problem with CSS specificity. I have tried to set the height on the <code>tbody</code> too. Fact is, <strong>the table always stays exactly the same height as its content</strong>, regardless of my efforts.</p>
  
  <p>Of course I could fake a table with a div structure, but it actually <strong>is</strong> a table, and I fear using divs I may run into an issue where some columns may not be properly aligned.</p>
  
  <blockquote>
    <p>How am I supposed to give a table a height?</p>
  </blockquote>