Resize Table Header height according to other Table Header height in different div - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div Table

Description

Resize Table Header height according to other Table Header height in different div

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">
#maindiv {<!--from  w w  w .  j  av  a 2  s  .co  m-->
   float:left;
   width:100%;
   height:566px;
   color:Chartreuse;
}

#leftdiv {
   border:2px solid yellow;
   margin-top:0px;
   margin-left:6px;
   float:left;
   height:100%;
   width:31%;
   -webkit-box-flex:2;
}

#leftdiv table {
   padding:6px;
   font-size:23px;
}

#rightdiv {
   border:2px solid blue;
   margin-top:0px;
   float:left;
   height:100%;
   width:68%;
   -webkit-box-flex:2;
}

#rightdiv table {
   padding:6px;
   font-size:23px;
}
</style> 
 </head> 
 <body> 
  <div id="maindiv"> 
   <table align="center" border="1"> 
    <tbody> 
     <tr> 
      <th>Lorem ipsum </th> 
      <td>Lorem ipsu</td> 
     </tr> 
     <tr> 
      <th>Lorem ipsum do</th> 
      <td>Lorem i</td> 
     </tr> 
     <tr> 
      <th>Lorem ipsum dol</th> 
      <td>Lorem ipsum dolor sit amet, con</td> 
     </tr> 
     <tr> 
      <th>Lorem ipsum dolor s</th> 
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor</td> 
     </tr> 
     <tr> 
      <th>Lorem ipsum </th> 
      <td>Lorem ipsum dolor sit amet, conse</td> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>

Related Tutorials