CODEWITHSUNDEEP
javascriptjqueryhtmlcss
sparpo
sparpo

Reputation: 109

how do i create a html table with scrolling

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

Upvotes: 1

Views: 65

Answers (3)

buddacious
buddacious

Reputation: 71

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>

Upvotes: 0

El Duderino
El Duderino

Reputation: 1392

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

Upvotes: 0

mayersdesign
mayersdesign

Reputation: 5310

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

Upvotes: 1

Related Questions