Set Two tables with different columns to be same height - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Column

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

Description

Set Two tables with different columns to be same height

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">
.row-eq-height {
   display:-webkit-box;
   display:-webkit-flex;
   display:-ms-flexbox;
   display:flex;
}

.col-1 {<!--from   w  w  w .  j  a  v  a2 s  . co m-->
   background-color:Chartreuse;
}

.col-2 {
   background-color:yellow;
}
</style> 
 </head> 
 <body> 
  <div class="row row-eq-height"> 
   <div class="col-1"> 
    <table> 
     <thead> 
      <tr> 
       <th>Lorem i</th> 
       <th>Lorem i</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>L</td> 
       <td>L</td> 
      </tr> 
      <tr> 
       <td>L</td> 
       <td>L</td> 
      </tr> 
      <tr> 
       <td>L</td> 
       <td>L</td> 
      </tr> 
      <tr> 
       <td>L</td> 
       <td>L</td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div class="col-2"> 
    <table> 
     <thead> 
      <tr> 
       <th>Lorem i</th> 
       <th>Lorem i</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>L</td> 
       <td>L</td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials