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.

Dalin Huang · Accepted Answer · 2017-05-22 06:38:04Z

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>

AliRıza Adıyahşi · Accepted Answer · 2017-05-22 06:38:27Z

3

#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...

edited May 22, 2017 at 6:38

answered May 22, 2017 at 6:33

AliRıza Adıyahşi

15.9k24 gold badges118 silver badges198 bronze badges

1 Comment

David Over a year ago

Thanks for the answer :)

Collectives™ on Stack Overflow

How to make table scrollable in javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related