Max-Height in Html Table

css, html

Solution

You can wrap the table in a div and give the `max-height` and `overflow: scroll` to that div

.pane {
  display: inline-block;
  overflow-y: scroll;
  max-height: 200px;
}

table {
  text-align: center;
  margin: auto;
}

<div class="pane">
  <table>
    <tr>
      <th>field a</th>
      <th>field b</th>
      <th>field c</th>
      <th>field e</th>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
    <tr>
      <td>3534534</td>
      <td>עו"ש</td>
      <td>6,463</td>
      <td>4,000</td>
    </tr>
  </table>
</div>

JSFiddle

There's another solution at Pure CSS Scrollable Table with Fixed Header without a wrapper div, but with an additional `thead` and `tbody` around the rows. You set the thead and tbody to `display: block` and give a `max-height` and `overflow-y` to the tbody. This lets the header stay in place when scrolling the rows. But as always, it comes with a price tag. You have to specify the column widths, because the thead and tbody are out of sync due to the `display: block`

thead {
    display: block;
}
tbody {
    display: block;
    overflow-y: scroll;
    max-height:200px;
}
thead th, tbody td {
    width: 70px;
}

<table>
    <thead>
        <tr>
            <th>field a</th>
            <th>field b</th>
            <th>field c</th>
            <th>field e</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
        <tr>
            <td>3534534</td>
            <td>עו"ש</td>
            <td>6,463</td>
            <td>4,000</td>
        </tr>
    </tbody>
</table>

JSFiddle

Update:

In the source code of that site, there are comments about IE and IE6. It sets

thead tr {
    position: relative
}

and defines the width of the table with

table {
    float: left;
    width: 740px
}

Wheter this is relevant for IE10, I don't know.

Problem

I create a table, and I want it's `height` be `800px`. If it's overflow, I want to make Scroll Bar but the Titles does not scroll. So I try to add this CSS: ``` overflow: scroll; max-height:800px; ``` But it's not work for me. This is the entire html file. What is the problem? CSS ``` table{ overflow: scroll; text-align: center; margin: auto; max-height:800px; } table, td, th { border:1px solid green; } th { background-color:green; color:white; } ``` And HTML ``` <table > <tr> <th>field a</th> <th>field b</th> <th>field c</th> <th>field e</th> </tr> <tr> <td>3534534</td> <td>עו"ש</td> <td>6,463</td> <td>4,000</td> </tr> <tr> <td>3534534</td> <td>עו"ש</td> <td>6,463</td> <td>4,000</td> </tr> </table> ``` Thanks!!!

Original source

Related problems