Layout table columns to full width with auto height scroll - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Column

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Column

Description

Layout table columns to full width with auto height scroll

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.tabHeight {<!-- w  ww . ja  v  a  2 s  .co  m-->
   max-height:100px;
   width:100%;
   overflow-y:auto;
   padding:3px;
   color:Chartreuse;
   border:3px solid yellow;
}

.tdwidth {
   width:51%
}

.wrap {
   max-height:100px!important;
   overflow:auto;
   border:3px solid blue;
}

.tabHeight1 {
   width:100%;
   overflow-y:auto;
   padding:3px;
   color:pink;
}

.tdwidth {
   width:51%
}
</style> 
 </head> 
 <body> 
  <table class="tabHeight"> 
   <tbody> 
    <tr> 
     <td class="tdwidth">Lore</td> 
     <td class="tdwidth">Lore</td> 
    </tr> 
    <tr> 
     <td class="tdwidth">Lore</td> 
     <td class="tdwidth">Lore</td> 
    </tr> 
    <tr> 
     <td class="tdwidth">Lore</td> 
     <td class="tdwidth">Lore</td> 
    </tr> 
    <tr> 
     <td class="tdwidth">Lore</td> 
     <td class="tdwidth">Lore</td> 
    </tr> 
    <tr> 
     <td class="tdwidth">Lore</td> 
     <td class="tdwidth">Lore</td> 
    </tr> 
    <tr> 
     <td class="tdwidth">Lore</td> 
     <td class="tdwidth">Lore</td> 
    </tr> 
    <tr> 
     <td class="tdwidth">Lore</td> 
     <td class="tdwidth">Lore</td> 
    </tr> 
   </tbody> 
  </table> 
  <div class="wrap"> 
   <table class="tabHeight1"> 
    <tbody> 
     <tr> 
      <td class="tdwidth">Lore</td> 
      <td class="tdwidth">Lore</td> 
     </tr> 
     <tr> 
      <td class="tdwidth">Lore</td> 
      <td class="tdwidth">Lore</td> 
     </tr> 
     <tr> 
      <td class="tdwidth">Lore</td> 
      <td class="tdwidth">Lore</td> 
     </tr> 
     <tr> 
      <td class="tdwidth">Lore</td> 
      <td class="tdwidth">Lore</td> 
     </tr> 
     <tr> 
      <td class="tdwidth">Lore</td> 
      <td class="tdwidth">Lore</td> 
     </tr> 
     <tr> 
      <td class="tdwidth">Lore</td> 
      <td class="tdwidth">Lore</td> 
     </tr> 
     <tr> 
      <td class="tdwidth">Lore</td> 
      <td class="tdwidth">Lore</td> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>

Related Tutorials