html - Table Height CSS and body scroll -
i want set height of table using css , allow scroll on body. problem height property not work table (height of table not equal size of div container higher). table not apply scroll because there enough space. 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>
you can try 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 values according requirement..
Comments
Post a Comment