how do i create a html table with scrolling

Question

I have a large html table(over 3000 elements), but obviously i dont want to display all of it at once. Some of the table will be displayed but most of it will all be contained in a small box that has scrolling. I wanted a table similar to the one that this site uses:stackoverflow search table.I tried doing something similar my code doesnt work: here is a sample table:

.table {
  height: 150px;
  overflow-y: scroll;
  overflow-x: hidden;
}

<table id="myTable" class="table">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
</table>

A scroller never appears at the side of the table. I'm relatively new to HTML

Did you search the site for related questions? I am sure this has been asked many times. — epascarello, Apr 04 '17 at 19:12
Hope this helps: http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody — user2087827, Apr 04 '17 at 19:14

mayersdesign · Answer 1 · 2017-04-04T19:16:14.993

<table> elements do not respect the overflow property. Force the overflow property by setting the table to block:

.table {
  display: block;
  height: 150px;
  overflow-y: scroll;
  overflow-x: hidden;
}

<table id="myTable" class="table">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
</table>

With a table that big you would benefit from the extras that https://datatables.net/ could bring :)

No problem at all, you can mark as correct and have a great day. — mayersdesign, Apr 04 '17 at 19:18

score 0 · Answer 2 · answered Apr 04 '17 at 19:17

0

Put it inside a div container.

.container {
  border: 1px solid #C0C0C0;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100px;
}

<div class="container">
  <table>
    ...
  </table>
</div>

https://codepen.io/anon/pen/NpmPOy

answered Apr 04 '17 at 19:17

Austin Winstanley

1,339
9
19

score 0 · Answer 3 · answered Apr 04 '17 at 19:22

Try wrapping your table in a div tag, applying the class to that div. In order to make the scroll bar actually appear, you'll also need to decrease the height of your table a bit, given the number of entries you have in the table:

.table {
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}

<div class="table">
    <table id="myTable" class="table">
      <tr class="header">
        <th style="width:60%;">Name</th>
        <th style="width:40%;">Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Berglunds snabbkop</td>
        <td>Sweden</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Koniglich Essen</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Germany</td>
      </tr>
    </table>
</div>

how do i create a html table with scrolling

3 Answers3