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

2
  • 1
    apply this to parent element Nov 29, 2013 at 21:22
  • 2
    Do you want to make table rows scrollable, but have column headers still in place above them?
    – Maksim
    Nov 29, 2013 at 21:30

4 Answers 4

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.

6
  • Thanks! that work for me in Google Chrome.(same style like JSFIddle) but not in IE 10 . there is solution for that? Nov 29, 2013 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. Nov 29, 2013 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, 2017 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, 2019 at 14:18
  • 1
    @Felix You may try for both the table and wrapper width: 100%;, and for th, td give width: 25%; Jan 10, 2019 at 15:40
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 :(

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/

2
  • 1
    Hi, That's work. but I want that the titles will stay on top when I scrolling. how can I do that? thank you! Nov 29, 2013 at 21:34
  • 1
    I eyeballed it for you and updated the widths on the fixed cells: jsfiddle.net/JmLFz/2 Nov 29, 2013 at 21:47
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.