CODEWITHSUNDEEP
htmlcsshtml-table
Karim KARAA
Karim KARAA

Reputation: 101

Table Height CSS and body scroll

I want to set the height of a table using CSS and then allow the scroll on the body. The problem is that the height property does not work for table (height of the table is not equal to the size of the div container but much higher). So the table does not apply the scroll because there is enough space. Any Fix?

#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>

Upvotes: 0

Views: 964

Answers (2)

Ivin Raj
Ivin Raj

Reputation: 3429

you can do this one :

#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

Or

HERE MY ANOTHER ONE DEMO

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

You can try like this: 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;
}

Adjust the values according to your requirement..

Upvotes: 1

Related Questions