How to add scrollbar to a div for increasing dynamic table?

Vote count:

0

I'm adding new TRs to one table dynamically from an link click and as the table gets bigger I need to create a scrollbar inside the div how can I accomplish that?

$( "#aAdd").click(function() {    
   var tableHtml = "<tr><td><input type='text' /></td><td><input type='text' /></td></tr>";
   $("#tbInfo").append(tableHtml);
});

edited 17 secs ago

Kolban

1,215

asked 6 mins ago

The Poet

2,181

2 Answers

Vote count:

1

HTML

<div class="myScrollTable">

   <table></table>

</div>

CSS

.myScrollTable{
   max-height:400px; /*example*/
   overflow: auto; /* auto , scroll .. */
}

Overflow

The overflow property specifies what happens if content overflows an element's box.

Max-height

The max-height property is used to set the maximum height of an element. This prevents the value of the height property from becoming larger than max-height.

answered 3 mins ago

WhiteLine

910

Vote count:

0

Wrap the table inside a div and set a desired max-height:XXXpx and overflow: auto to the div.

$("#aAdd").click(function() {

  var tableHtml = "<tr><td><input type='text' /></td><td><input type='text' /></td></tr>";
  $("#tbInfo").append(tableHtml);
});

.tableContainer {
  max-height: 200px;
  overflow: auto;
  display: inline-block; /* just for demo */
}

<script src="http://ift.tt/1qRgvOJ"></script>
<div class="tableContainer">
  <table id="tbInfo">
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
    </tr>
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
    </tr>
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
    </tr>
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
    </tr>
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
    </tr>
  </table>
</div>
<button id="aAdd">Add Rows</button>

answered 26 secs ago

Vega

47.6k

How to add scrollbar to a div for increasing dynamic table?