title: How to force a height on an html table?
body: <p>Not sure why but this table isn't listening to me. I'm giving it height/max-height of 20px and it's still showing all the rows.</p>
  
  <p>css:</p>
  
  <pre><code>table {
      border:1px solid black;
      overflow:hidden;
      height:20px;
      max-height:20px;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;&lt;td&gt;this is a row&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;this is a row&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;this is a row&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;this is a row&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;this is a row&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;this is a row&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;this is a row&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;this is a row&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/foreyez/7demh/" rel="nofollow">http://jsfiddle.net/foreyez/7demh/</a></p>