How create table only using <div> tag and Css.

Posted by Kumara on Stack Overflow See other posts from Stack Overflow or by Kumara
Published on 2010-06-16T12:30:19Z Indexed on 2010/06/16 12:32 UTC
Read the original article Hit count: 226

Filed under:
|

I want to create table only using tag and CSS.

This is my sample table.

      <div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Customer ID</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                  <div class="divCell">001</div>
                <div class="divCell">002</div>
                <div class="divCell">003</div>
            </div>
            <div class="divRow">
                <div class="divCell">xxx</div>
                <div class="divCell">yyy</div>
                <div class="divCell">www</div>
           </div>
            <div class="divRow">
                <div class="divCell">ttt</div>
                <div class="divCell">uuu</div>
                <div class="divCell">Mkkk</div>
           </div>

      </div>
  </form>

And Style :

    .divTable
    {
        display:  table;
        width:auto;
        background-color:#eee;
        border:1px solid  #666666;
        border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }

    .divRow
    {
       display:table-row;
       width:auto;

    }

    .divCell
    {
        float:left;/*fix for  buggy browsers*/
        display:table-column;
        width:200px;
        background-color:#ccc;

    }



</style>

But this table not work with IE7 and below version.Please give your solution and ideas for me. Thanks.

© Stack Overflow or respective owner

Related posts about html

Related posts about css