Max-Height in Html Table

Question

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

Answer 1

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

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

Answer 2

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

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

HTML example:

<div id="table-limiter">    <table>       ...    </table> </div> 

Styling table is, sometimes, a trouble :(