CODEWITHSUNDEEP
jqueryhtml
RollRoll
RollRoll

Reputation: 8462

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

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);
});

Upvotes: 1

Views: 3287

Answers (2)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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

$("#aAdd").click(function() {
  $("#tbInfo").append("<tr><td><input type='text' /></td><td><input type='text' /></td></tr>");
});
.tableContainer {
  max-height: 150px;
  overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Click the button "Add Rows" to add more rows and you will see the scrollbard when the height goes beyond 200px</p>
<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>

Upvotes: 0

WhiteLine
WhiteLine

Reputation: 1991

Use a div-container for your table

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.

Upvotes: 2

Related Questions