How to make table scrollable in javascript

Question

I am making one div and onclick of div I am making some table. I am getting the table value. I want my table to be scrollable.

Here is my code.

var myTable = '<input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name">'+
            '<table id="myTable">'+ '<tr class="header"></tr>' + '<tr><td></td></tr>'+ '</table>';

I am getting this table data from some proxy. I want size of table should be limited and if data is more this shoud be scrollable.

CSS which I am applying here is

#myInput {
  background-image: url('Drop.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 30%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

Any way to proceed this.

Answer 1

Simple, with fixed max-height, set overflow: auto, if table higher than 150px, a scrollbar will present.

thead,
tbody {
  display: block;
}

tbody {
  height: 150px;
  overflow: auto;
}

thead,
tbody {
  display: block;
}

tbody {
  max-height: 150px;
  overflow: auto;
}

#myInput {
  background-image: url('Drop.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 30%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

<input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name">
<table id="myTable">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Answer 2

#myTable
{
    width: 200px;
    height: 400px;
    overflow: auto;
}

Or Table with fixed header

tbody {
    width: 200px;
    height: 400px;
    overflow: auto;
}

This might not work with IE some versions. If you want to work all browsers, You can get into the div your table and set its height and overflow attributes.Like following;

var myTable = '<input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name">'+
        '<div class="scrollable"><table id="myTable">'+ '<tr class="header"></tr>' + '<tr><td></td></tr>'+ '</table></div>';

and css

.scrollable
{
    width: 200px;
    height: 400px;
    overflow: auto;
}

There are a lot of solution to this. You can also define nested tables or if you want,you can apply scroll only rows, and etc...