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

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -