Using display: table, display: table-row and display: table-cell, I am dealing with a large number of rows in a table and utilizing AngularJS ng-repeat to populate them. Although the example shows just two rows, in reality there are many more that all need to fit within a height of 10rem.
<div style=height: 10rem>
<div style="display: table">
<div style="display: table-row">
<div style="display: table-cell">
xxx
</div>
<div style="display: table-cell">
xxx
</div>
</div>
<div style="display: table-row">
<div style="display: table-cell">
xxx
</div>
<div style="display: table-cell">
xxx
</div>
</div>
</div>
</div>
The goal is to constrain the table's height and show a scroll bar on the right side, but attempts to make it fit within a <div> with a set height have been unsuccessful.
If anyone can offer guidance on how to limit the table height and display vertical and horizontal scroll bars, it would be greatly appreciated.