Give a table a fixed height?

Question

I'm trying to get my table a fixed height - I'll eventually use overflow to scroll. But my height is being ignored.

CSS:

table {
    height: 20px;
}

HTML:

<table>
    <tr>
        <td>
            hello
            ......

try looking in Chrome Dev Tools to find out what styling is being applied to the element. it's worth reading up on specificity for CSS. — Jared, Feb 03 '18 at 21:06
The styles are being applied to the table element, just not working. — panthro, Feb 03 '18 at 21:07
As spirits comment said, the table needs a specific display such as (inline)block togeteher with an overflow(-y) setting. Also mentioned in this SO post: https://stackoverflow.com/questions/8970362/setting-a-max-height-on-a-table. Having said that, just want to mention looking into flexbox or other alternative layouts may be easier than adapting a table for layout purposes — Me.Name, Feb 03 '18 at 21:09

score 0 · Answer 1 · answered Feb 03 '18 at 21:08

https://jsfiddle.net/hop061md/

Use display:inline-block on table.

table {
  max-height: 20px;
  display: inline-block;
  overflow: auto;
  background: red;
}

<table>
  <tr>
    <td>
      hello
    </td>
  </tr>
  <tr>
    <td>
      hello
    </td>
  </tr>
  <tr>
    <td>
      hello
    </td>
  </tr>
  <tr>
    <td>
      hello
    </td>
  </tr>
  <tr>
    <td>
      hello
    </td>
  </tr>
  <tr>
    <td>
      hello
    </td>
  </tr>
</table>

Bhuwan · Answer 2 · 2018-02-03T21:14:15.457

The overflow property works to the block elements only...And table default display property is display:table...

So I think setting table to display:block will be not a good idea...

So Just wrap your table into a div and then apply height and overflow:auto

Stack Snippet

div {
  height: 50px;
  overflow: auto;
}

table {
  border-collapse: collapse;
  font: 13px Verdana;
}

td {
  border: 1px solid #ccc;
  padding: 3px 10px;
}

<div>
  <table>
    <tr>
      <td>
        hello
      </td>
    </tr>
    <tr>
      <td>
        hello
      </td>
    </tr>
    <tr>
      <td>
        hello
      </td>
    </tr>
    <tr>
      <td>
        hello
      </td>
    </tr>
    <tr>
      <td>
        hello
      </td>
    </tr>
    <tr>
      <td>
        hello
      </td>
    </tr>
  </table>

</div>

Give a table a fixed height?

2 Answers2