html - 表格高度 CSS 和主体滚动

Question

我想使用 CSS 设置表格的高度，然后允许在正文上滚动。 问题是 height 属性不适用于表格(表格的高度不等于 div 容器的大小，但要高得多)。所以表不应用滚动，因为有足够的空间。任何修复？

#container{
height : 75px;
overflow:hidden;
}

#tab{
border:1px solid black;
height:100%;
}

tbody{
background-color: blue;
height:90%;
overflow:scroll;
}

<div id="container">
<table id="tab">
    <thead>
        <tr>
            <td>Head</td>
            <td>Head</td>
        </tr>
    </thead>
    <tbody>
         <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
        <tr>
            <td>Body</td>
            <td>Body</td>
        </tr>
   </tbody>
</table>
</div>
        

Answer 1

你可以这样试试: Demo

 #container {
    height : 75px;
    overflow:hidden;
}
#tab {   
    border: 1px solid black;   
    display:inline-block;
    width: 100%;
    background-color: #999;
}
tbody {
    background-color: #ddd;
    display: block;
    height: 44px;   
    overflow-y: auto;  
    overflow-x: hidden; 
}
th,td{padding:2px 10px;
}

根据您的要求调整值..