bucek bucek - 10 days ago 6
CSS Question

Cannot make the table scrollable

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

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/