Total members 11390 |It is currently Sun Dec 21, 2014 12:58 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R

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: 2694
Have thanks: 74 time
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     -  
 Creating SQL Table     -  
 Get table column flag in php     -  
 text Indent value to table     -  

All times are UTC [ DST ]



Topic Tags

HTML Table, HTML Div






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