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

Question

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.

Answer 1

divs shouldn't be used for tabular data. That is just as wrong as using tables for layout.
Use a <table>. Its easy, semantically correct, and you'll be done in 5 minutes.

Answer 2

take a look at this article

Answer 3

if you do the exact same markup as you would do using a table, why don't you use a table? messing araound with all this display:table-column;, display:table; and so on is just senseless.

Answer 4

why do you want to use div to create a table?

However you could try using blueprint framework ( http://www.blueprintcss.org/ ). It's a grid framework. Should be able to get what you need.

Answer 5

check this link please, it may be a good help

Answer 6

If there is anything in <table> you don't like, maybe you could use reset file?

or

if you need this for layout of the page check out the cssplay layout examples for designing websites without tables.

Answer 7

Thanks for your reply.

.col { float:left; width:100px; height:20px; border:1px solid #ccc;

}

.clearRow { clear:both; }

Header Column 1 Header Column 2 Header Column 3 Body Column 1 Body Column 2 Body Column 3 Body Column 1 Body Column 2 Body Column 3