How create table only using <div> tag and Css

Html Problem Overview

I want to create table only using <div> tag and CSS.

This is my sample table.

<body>
  <form id="form1">
      <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>
</body>

And Style:

<style type="text/css">
    .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.

Html Solutions

Solution 1 - Html

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

Runnable snippet:

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

<body>
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Customer ID</div>
                <div  class="div-table-col">Customer Name</div>
                <div  class="div-table-col">Customer Address</div>
             </div>
            <div class="div-table-row">
                  <div class="div-table-col">001</div>
                <div class="div-table-col">002</div>
                <div class="div-table-col">003</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">xxx</div>
                <div class="div-table-col">yyy</div>
                <div class="div-table-col">www</div>
           </div>
            <div class="div-table-row">
                <div class="div-table-col">ttt</div>
                <div class="div-table-col">uuu</div>
                <div class="div-table-col">Mkkk</div>
           </div>

      </div>
  </form>
</body>

Solution 2 - Html

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.

Solution 3 - Html

This is an old thread, but I thought I should post my solution. I faced the same problem recently and the way I solved it is by following a three-step approach as outlined below which is very simple without any complex CSS.

(NOTE : Of course, for modern browsers, using the values of table or table-row or table-cell for display CSS attribute would solve the problem. But the approach I used will work equally well in modern and older browsers since it does not use these values for display CSS attribute.)

3-STEP SIMPLE APPROACH

For table with divs only so you get cells and rows just like in a table element use the following approach.

Replace table element with a block div (use a .table class)
Replace each tr or th element with a block div (use a .row class)
Replace each td element with an inline block div (use a .cell class)

.table {display:block; }
.row { display:block;}
.cell {display:inline-block;}

    <h2>Table below using table element</h2>
    <table cellspacing="0" >
       <tr>
          <td>Mike</td>
          <td>36 years</td>
          <td>Architect</td>
       </tr>
       <tr>
          <td>Sunil</td>
          <td>45 years</td>
          <td>Vice President aas</td>
       </tr>
       <tr>
          <td>Jason</td>
          <td>27 years</td>
          <td>Junior Developer</td>
       </tr>
    </table>
    <h2>Table below is using Divs only</h2>
    <div class="table">
       <div class="row">
          <div class="cell">
             Mike
          </div>
          <div class="cell">
             36 years
          </div>
          <div class="cell">
             Architect
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Sunil
          </div>
          <div class="cell">
             45 years
          </div>
          <div class="cell">
             Vice President
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Jason
          </div>
          <div class="cell">
             27 years
          </div>
          <div class="cell">
             Junior Developer
          </div>
       </div>
    </div>

UPDATE 1

To get around the effect of same width not being maintained across all cells of a column as mentioned by thatslch in a comment, one could adopt either of the two approaches below.

Specify a width for cell class

cell {display:inline-block; width:340px;}
Use CSS of modern browsers as below.

Solution 4 - Html

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

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

Solution 5 - Html

I don't see any answer considering Grid-Css. I think it is a very elegant approach: grid-css even supports row span and and column spans. Here you can find a very good article:

https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611

Solution 6 - Html

It works for me, and it's help's to create responsive tables, For more information visit this website: https://wisdmlabs.com/blog/responsive-tables-using-css-div-tag/

#resp-table {
		width: 100%;
		display: table;
	}
	#resp-table-body{
		display: table-row-group;
	}
	.resp-table-row{
		display: table-row;
	}
	.table-body-cell{
		display: table-cell;
		border: 1px solid #dddddd;
		padding: 8px;
		line-height: 1.42857143;
		vertical-align: top;
	}

<div id="resp-table">
	<div id="resp-table-body">
		<div class="resp-table-row"> 
			<div class="table-body-cell">
				col 1 
			</div>
			<div class="table-body-cell">
				col 2 
			</div>
			<div class="table-body-cell">
				col 3 
			</div>
			<div class="table-body-cell">
				col 4 
			</div>
		</div>
		<div class="resp-table-row"> 
			<div class="table-body-cell">
				second row col 1 
			</div>
			<div class="table-body-cell">
				second row col 2 
			</div>
			<div class="table-body-cell">
				second row col 3 
			</div>
			<div class="table-body-cell">
				second row col 4 
			</div>
		</div>
	</div>
</div>

Solution 7 - Html

Use the correct doc type; it will solve the problem. Add the below line to the top of your HTML file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Solution 8 - Html

A bit OFF-TOPIC, but may help someone for a cleaner HTML... CSS

.common_table{
    display:table;
    border-collapse:collapse;
    border:1px solid grey;
    }
.common_table DIV{
    display:table-row;
    border:1px solid grey;
    }
.common_table DIV DIV{
    display:table-cell;
    }

HTML

<DIV class="common_table">
   <DIV><DIV>this is a cell</DIV></DIV>
   <DIV><DIV>this is a cell</DIV></DIV>
</DIV>

Works on Chrome and Firefox

Solution 9 - Html

In building a custom set of layout tags, I found another answer to this problem. Provided here is the custom set of tags and their CSS classes.

HTML

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>
   
   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
	display : table;
	clear : both;
	table-layout : fixed;
	width : 100%;
}

layout-table:unresolved
{
	color : red;
	border: 1px blue solid;
	empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
	display : table-row;
	clear : both;	
	empty-cells : show;
	width : 100%;
}

layout-column 
{ 
	display : table-column;
	float : left;
	width : 25%;
	min-width : 25%;
	empty-cells : show;
	box-sizing: border-box;
	/* border: 1px solid white; */
	padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
	background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

The key to getting empty cells and cells in general to be the right size, is Box-Sizing and Padding. Border will do the same thing as well, but creates a line in the row. Padding doesn't. And, while I haven't tried it, I think Margin will act the same way as Padding, in forcing and empty cell to be rendered properly.

Solution 10 - Html

You can create "new tags" based on classic table, a "div table":

<STYLE>
dtable {
 display:table;
 width:100%;
 border:1px solid #000;
 border-spacing:5px;
}
dtable dtr {
 display:table-row;
 clear: both;
}
dtable dtd {
 display:table-column;
 padding:5px;
}
</STYLE>

<DTABLE>
 <DTR>
  <DTD>row 1 col 1</DTD>
  <DTD>row 1 col 2</DTD>
 </DTR>
 <DTR>
  <DTD>row 2 col 1</DTD>
  <DTD>row 2 col 2</DTD>
 </DTR>
</DTABLE>

You can use specific CSS selectors for each "dtd", like:

dtable dtd:nth-child(1) {
 width:300px;
 font-weight:bold;
}

dtable dtd:nth-child(2) {
 width:400px;
}

and "zebras" like:

dtable dtr:nth-child(odd) {
 background-color:#ddd;
}

and more, see: https://css-tricks.com/useful-nth-child-recipies/

Content Type	Original Author	Original Content on Stackoverflow
Question	Kumara	View Question on Stackoverflow
Solution 1 - Html	Shiva Komuravelly	View Answer on Stackoverflow
Solution 2 - Html	Kobi	View Answer on Stackoverflow
Solution 3 - Html	Sunil	View Answer on Stackoverflow
Solution 4 - Html	Urszula Karzelek	View Answer on Stackoverflow
Solution 5 - Html	Neo	View Answer on Stackoverflow
Solution 6 - Html	Mdr Kuchhadiya	View Answer on Stackoverflow
Solution 7 - Html	abcd	View Answer on Stackoverflow
Solution 8 - Html	Harijs Krūtainis	View Answer on Stackoverflow
Solution 9 - Html	E Net Arch	View Answer on Stackoverflow
Solution 10 - Html	Arvy	View Answer on Stackoverflow