Total members 11121 |It is currently Fri May 24, 2013 12:56 pm Login / Join Codemiles

All times are UTC [ DST ]



  Div Table with css row span
Sun Feb 26, 2012 9:09 pm 

In this example we present table using Div tags and we add row spanning using CSS properties.

Code:
<html>
<
head>
  <title>Div Table with css row span</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
  .wrapperDiv {
    position: relative;
  }
  .table {
    display: table;
  }
  .Tablerow {
    display: table-row;
  }
  .Tablecell {
    border: 2px solid #54FF93;
    display: table-cell;
  }
  .Tablecell.empty
  {
    border: none;
    width: 150px;
  }
  .Tablecell.rowspanned {
    border: 2px solid #54FE43;
    position: absolute;
    width: 150px;
    top: 0;
    bottom: 0;
  }
  </style>
</
head>

<
body>
   <p>
      In this example we build table using Div tags and we add rows span
      using CSS properties 
.
   </p>
<
div class="wrapperDiv">
  <div class="table">
    <div class="Tablerow">
      <div class="Tablecell">
        Left Header
      
</div>
      <div class="rowspanned Tablecell">
        Center Spanned Cell
      
</div>
      <div class="Tablecell">
        Right Header
      
</div>
    </div>
    <div class="Tablerow">
      <div class="Tablecell">
        Left Footer
      
</div>
      <div class="empty Tablecell"></div>
      <div class="Tablecell">
        Right Footer
      
</div>
    </div>
  </div>
</
div>

</
body>
</
html>
 


_________________
Please recommend / share my post if you found it helpful.


Author:
Mastermind
User avatar Posts: 2788
Have thanks: 71 time
TOP
   
 
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : Div Table with css row span
 vertical alignment of span tag     -  
 row-span attribute usage     -  
 Using table in latex     -  
 row highlight of table     -  
 table creation     -  
 table row hover     -  
 Creating table using div tag     -  
 lowercase table content     -  
 Select odd rows from table     -  
 Change table style using CSS     -  

All times are UTC [ DST ]



Jump to:  




Home
General Talks
Finished Projects
Code Library
Games
Tutorials

Java
C/C++
C-sharp
php
Script
JSP/Servlets
Ajax
ASP/ASP.net
Google SEO
Database
Communications
Phpbb3 styles
Photoshop tutorials
Flash tutorials
Find a job






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007->Today
mileX v1.0 designed by codemiles team