Max-Height in Html Table

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!!!

4 Answers

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

<div> <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> ... </table>
</div>

.pane { display: inline-block; overflow-y: scroll; max-height:200px;
}
table { text-align: center; margin: auto;
}

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

<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> ... </tbody>
</table>

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

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.

Use another element to wrap the whole table, and give those properties to him:

#table-limiter {
max-height:800px;
overflow: scroll;
}

HTML example:

<div> <table> ... </table>
</div>

Styling table is, sometimes, a trouble :(

Here's one approach.

Add a wrapping div with CSS:

#set-height { display: inline-block; height:800px; overflow: scroll;
}

Fiddle:

Wrap the table in a div tag and set the height of the div to 800px with an overflow set to auto.

<div>
//Table goes here
</div>

Then if your table height is more than 800px a scroll bar will appear in the div and allow you to scroll through the table.