First column has the same height other columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

First column has the same height other columns

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">

table {<!--  w ww  . java 2 s. co  m-->
   table-layout: fixed;
   width: 100%;
   *margin-left: -100px;/*ie7*/
}
td, th {
   vertical-align: top;
   border-top: 1px solid #ccc;
   height: 80px;
   padding:10px;
   width:100px;
}
th {
   position:absolute;
   *position: relative; /*ie7*/
   left:0;
   width:100px;
}
.outer {position:relative}
.inner {
   overflow-x:scroll;
   overflow-y:visible;
   width:400px;
   margin-left:100px;
}


      </style> 
 </head> 
 <body> 
  <div class="outer"> 
   <div class="inner"> 
    <table> 
     <tbody> 
      <tr> 
       <th>Header A</th> 
       <td>col 1 - A</td> 
       <td>col 2 - A (WITH LONGER CONTENT)</td> 
       <td>col 3 - A</td> 
       <td>col 4 - A</td> 
       <td>col 5 - A</td> 
      </tr> 
      <tr> 
       <th>Header B</th> 
       <td>col 1 - B</td> 
       <td>col 2 - B</td> 
       <td>col 3 - B</td> 
       <td>col 4 - B</td> 
       <td>col 5 - B</td> 
      </tr> 
      <tr> 
       <th>Header C Header C Header C Header C </th> 
       <td>col 1 - C</td> 
       <td>col 2 - C</td> 
       <td>col 3 - C</td> 
       <td>col 4 - C</td> 
       <td>col 5 - C</td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials