Question

我想使用CSS设置表格的高度，然后允许在主体上滚动。问题是height属性对table不起作用（表的高度不等于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;
}

根据您的要求调整数值..

Answer 2

你可以这样做：

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

DEMO FIDDLE

或

HERE MY ANOTHER ONE DEMO

表高度CSS和正文滚动

2 个答案: