Marilou Marilou - 1 month ago 11
AngularJS Question

How can I force a table made using the CSS display: table to fit within a minimum height?

I am using display: table, display: table-row and display: table-cell. I have large number of rows in a table and I am using the AngularJS ng-repeat to populate these. Here's an example with just two rows but in practice I have may more and I need these to all fit within the 10rem height.

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




I would like to limit the height of the table (grid) and have a scroll bar on the right. However whatever I do it does not seem to force the table to fit within a with a height defined.

Can anyone give me any advice on how I can limit the table height and have a vertical and horizontal scroll bar appear.

Answer

Add overflow-x: scroll (or auto) to the container. (The one with height 10rem.) And overflow-x: visible to the table element itself.

Addition: You forgot the quotation marks in the first line:

<div style="height: 10rem">
Comments