How to force a height on an html table?

css, html

Solution

Add `display:block;` to the table's CSS:

table {
  border: 1px solid black;
  overflow: auto;
  height: 20px;
  max-height: 20px;
  display: block;
}

<table>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
</table>

This will make it fill the available horizontal space, so add an explicit width if you want to limit it:

table {
  border: 1px solid black;
  overflow: auto;
  height: 30px;
  max-height: 30px;
  display: block;
  width: 200px;
}

<table>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
</table>

Problem

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. css: ``` table { border:1px solid black; overflow:hidden; height:20px; max-height:20px; } ``` html: ``` <table> <tr><td>this is a row</td></tr> <tr><td>this is a row</td></tr> <tr><td>this is a row</td></tr> <tr><td>this is a row</td></tr> <tr><td>this is a row</td></tr> <tr><td>this is a row</td></tr> <tr><td>this is a row</td></tr> <tr><td>this is a row</td></tr> </table> ``` http://jsfiddle.net/foreyez/7demh/

Original source