Resizable HTML Table using Divs - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div Table

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

Description

Resizable HTML Table using Divs

Demo Code

ResultView the demo in separate window 

<html>
 <head></head> 
 <body> 
  <header> 
   <style type="text/css">
object<!-- w ww.j av  a2  s. c  o  m-->
 {
   outline:none;
   display:block;
}

html, body {
   margin:0;
   padding:0;
   height:100%;
}

.divLeftContainer {
   min-height:100%;
   height:100%;
   display:block;
   background-color:Chartreuse;
   float:left;
}

.divTable
 {
   float:left;
   width:136px;
   height:auto;
   display:table;
   background-color:yellow;
}

.newDiv {
   position:relative;
   left:136px;
   height:100%;
   width:100%;
   display:block;
   background-color:blue;
   border:2px solid pink;
   border-left:0px;
}

.divTableRow
 {
   width:136px;
   height:100%;
   display:table-row;
   border:0px;
}

.divTableCell
 {
   width:136px;
   height:31px;
   background:white url('https://www.java2s.com/style/demo/Google-Chrome.png') 0 0 no-repeat;
   display:table-cell;
   text-align:center;
   vertical-align:middle;
}

.divTableTopCell
 {
   width:136px;
   height:31px;
   background:white url('https://www.java2s.com/style/demo/Google-Chrome.png') 0 0 no-repeat;
   display:table-cell;
   text-align:center;
   border-bottom:2px solid OrangeRed;
   vertical-align:middle;
}

.divTableBottomBox
 {
   width:134px;
   display:block;
   height:100%;
   background-color:grey;
   border:2px solid BlueViolet;
   border-top:0px;
   margin-bottom:0px;
   bottom:0px;
}

.divParent {
   position:relative;
   display:block;
   height:701px;
   min-height:701px;
   min-width:701px;
}
</style> 
  </header> 
  <div class="divParent"> 
   <div class="divLeftContainer"> 
    <div class="divTable"> 
     <div class="divTableRow"> 
      <div id="accountDetails" class="divTableTopCell">
        Lorem ipsum dolor 
      </div> 
     </div> 
     <div class="divTableRow"> 
      <div id="locations" class="divTableCell">
        Lorem ipsum 
      </div> 
     </div> 
     <div class="divTableRow"> 
      <div id="users" class="divTableCell">
        Lorem i 
      </div> 
     </div> 
     <div class="divTableRow"> 
      <div id="training" class="divTableCell">
        Lorem ipsu 
      </div> 
     </div> 
     <div class="divTableRow"> 
      <div id="contracts" class="divTableCell">
        Lorem ipsum 
      </div> 
     </div> 
    </div> 
    <div class="divTableBottomBox"> 
    </div> 
   </div> 
   <div class="newDiv">
     Lorem ip 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials