37

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

DaniP
  • 37,813
  • 8
  • 65
  • 74
user2097810
  • 735
  • 6
  • 17
  • 25

4 Answers4

58

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.

Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198
  • Thanks! that work for me in Google Chrome.(same style like JSFIddle) but not in IE 10 . there is solution for that? – user2097810 Nov 29 '13 at 22:43
  • I don't have IE10, so I cannot say. When you look at the source of that site, there are comments about IE6. See updated answer. – Olaf Dietsche Nov 29 '13 at 22:52
  • FYI, the second option does not work with column widths defined using percents. But `em`, `rem`, and `vw` appear to work well for the jsfiddle example. – Justin C Dec 21 '17 at 18:52
  • How to stretch the table to 100% and keep each column to have equal width (25%) in this case? – Felix Jan 10 '19 at 14:18
  • 1
    @Felix You may try for both the table and wrapper `width: 100%;`, and for `th, td` give `width: 25%;` – Olaf Dietsche Jan 10 '19 at 15:40
  • @OlafDietsche, I have tried that, but could not make it work: http://jsfiddle.net/felix111/mpa6dqLs/7/ – Felix Jan 11 '19 at 08:43
7

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 :(

Maloke
  • 226
  • 1
  • 9
3

Here's one approach.

Add a wrapping div with CSS:

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

Fiddle: http://jsfiddle.net/JmLFz/

whaleofawash
  • 39
  • 2
1

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

<div style="height:800px; overflow:auto;">
//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.

user1078385
  • 344
  • 2
  • 6
  • 21