Changing the height of ng-table

Question

I am dynamically creating tables using ng-table, based on the json data. Ng-tables automatically adjust their height based on the amount of rows.

Is there a way that I can fix the size of the tables, so all of them are of the same size, based on the table with the maximum rows (maximum height)?

Answer 1

You can do it by wrapping your table tag inside a div and then give height to that wrapper div. Give height and width to wrapper div and also give overflow-y:scroll

CSS

#scrollable-area {
  margin: auto;
    width: 80%;
    height: 150px;
    border: 2px solid #ccc;
    overflow-y: scroll; /* <-- here is what is important*/
}

HTML

   <div id="scrollable-area">
          <table ng-table="tableParams" class="table">
          </table>
    </div>

Plunkr here