Cannot make the table scrollable

Question

I have a table and can not make make it scrollable - to do not have a table higher than map.

    #table{
        width:252px;
        top:100px;
        left:100px;
        position: absolute;
        z-index: 3;
        font-size: 11px;
        background-color: rgba(247, 247, 247, 0.9);
        border: 1px solid #D7D2D2;
        max-height:252px;
        overflow: auto
    }
    table, th, td {
        border: 1px solid #D7D2D2;
        padding: 2px;
        max-height:252px;
        overflow: auto
    }

Answer 1

wrap #table in a wrapper div that has a fixed height with overflow and positioning.

Heres how:

HTML

<div class="table-wrapper">
    <table id="table">
        <tr>
            <th><b>Name</b>

            </th>
            <th><b>Address</b>

            </th>
            <th><b>Likes</b>

            </th>
        </tr>
        ...
    </table>
</div>

CSS

.table-wrapper {
     max-height:152px;
     overflow-y:scroll;
     top:100px;
     left:100px;
     position: absolute;
     z-index: 3;
}

#table{
    width:252px;


    font-size: 11px;
    background-color: rgba(247, 247, 247, 0.9);
    border: 1px solid #D7D2D2;


}

Fiddle:http://jsfiddle.net/Varinder/RA7e7/1/

Answer 2

You can put the Table inside a div and then make it scroll able. not sure if its 100% what you want but else it can give you a few ideas to fix the problem.

<div id="Layer1" style="position:relative;width:350px;height:200px; overflow:
scroll;">control goes here</div>

Answer 3

Remove the table id from your table, and add add a table id to the div that you have wrapped around it.

Then remove the max-height from your table, th, td CSS rule.

You'll need to tweak your CSS to ensure it all still looks as you want it, remove duplicate borders etc.

Here's a reduced working example - you should be able to apply this to your page.