Making a CSS table layout support colspan - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Column

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

Description

Making a CSS table layout support colspan

Demo Code

ResultView the demo in separate window 

<html lang="en-US">
 <head> 
  <style type="text/css">
.table {<!--from ww w .j av  a 2s .  co  m-->
   width:601px;
   margin:0 auto;
}

.header {
   background-color:Chartreuse;
   font-weight:bold;
   margin:0;
}

.row {
   border-bottom:2px solid yellow;
}

.col1 {
   float:left;
   width:51%;
}

.col2 {
   float:none;
   width:100%;
}

.clear {
   clear:both;
}
</style> 
 </head> 
 <body> 
  <div class="table"> 
   <div class="row"> 
    <h4 class="header">Lorem ipsum </h4> 
   </div> 
   <div class="row"> 
    <div class="col1">
      Lorem i 
    </div> 
    <div class="col1">
      Lorem i 
    </div> 
    <div class="clear"></div> 
    <!-- clear floated elements --> 
   </div> 
   <div class="row"> 
    <div class="col2">
      Lorem ipsum d 
    </div> 
    <div class="clear"></div> 
    <!-- clear floated elements --> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials