html - 无法使表格可滚动

Question

我有一个表格，但无法使其可滚动 - 没有高于 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

将 #table 包装在一个具有固定高度并带有溢出和定位功能的包装器 div 中。

方法如下:

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/