Table grow size bigger than HTML tag


I have a project which I just need to list a bunch of orders on a HTML table. But when the table gets too big, it overlaps my DIV like this:

At first I thought that this could be a CSS problem, but then I noticed that the HTML tag size is SMALLER than my table size:

Now I’m a bit lost, I already set all my DIVs to have a 100% height, but because the HTML tag size is static (for some reason :confused: ), the table overlaps my DIVs. Here is how I’m generating my table:

{{#if isNewOrder}}
    <h2 style="margin-left: 30px"> Pedidos Pendentes </h2>
    <table cellspacing='0'>
    {{#each tablecontent}}
            <td>{{prettifyDate timestamp}}</td>
            <td>{{prettifyPrice price}}</td>
                <button type="button" class="btn btn-info">Detalhes</button>
                <button type="button" class="btn btn-success">Aceitar</button>
                <button type="button" class="btn btn-danger">Rejeitar</button>

No big deal right? I have two session variables (isNewOrder and tablecontent), isNewOrder tells if I should show that table or not, and tablecontent contains all the elements of my table.

So, am I missing something about big lists with Meteor? Or could it really be a problem with my CSS (despite I set all DIVs to 100% of height).

Best Regards, Ernani

It’s probably a CSS thing. You may have set a height on the html (height:100% would be a static height) and you need to either just unset it or change it to min-height:100%, or you may want an overflow:scroll on the div.

Hello @carina thanks for helping me out. I’m still very skeptical that the HTML component isn’t increasing its size when I populate my table, however overflow:scroll was an interesting alternative. Now there is a blank space between the scroll and the end of the page but it’s not a big deal for my project.

Thanks a lot.