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.
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.
.table class).row class).cell class).table {display:block; }_x000D_
.row { display:block;}_x000D_
.cell {display:inline-block;} <h2>Table below using table element</h2>_x000D_
<table cellspacing="0" >_x000D_
<tr>_x000D_
<td>Mike</td>_x000D_
<td>36 years</td>_x000D_
<td>Architect</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Sunil</td>_x000D_
<td>45 years</td>_x000D_
<td>Vice President aas</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Jason</td>_x000D_
<td>27 years</td>_x000D_
<td>Junior Developer</td>_x000D_
</tr>_x000D_
</table>_x000D_
<h2>Table below is using Divs only</h2>_x000D_
<div class="table">_x000D_
<div class="row">_x000D_
<div class="cell">_x000D_
Mike_x000D_
</div>_x000D_
<div class="cell">_x000D_
36 years_x000D_
</div>_x000D_
<div class="cell">_x000D_
Architect_x000D_
</div>_x000D_
</div>_x000D_
<div class="row">_x000D_
<div class="cell">_x000D_
Sunil_x000D_
</div>_x000D_
<div class="cell">_x000D_
45 years_x000D_
</div>_x000D_
<div class="cell">_x000D_
Vice President_x000D_
</div>_x000D_
</div>_x000D_
<div class="row">_x000D_
<div class="cell">_x000D_
Jason_x000D_
</div>_x000D_
<div class="cell">_x000D_
27 years_x000D_
</div>_x000D_
<div class="cell">_x000D_
Junior Developer_x000D_
</div>_x000D_
</div>_x000D_
</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.
.table {display:table; } .row { display:table-row;} .cell {display:table-cell;}
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
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.
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.
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">
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.
.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 {_x000D_
display: table; _x000D_
width: auto; _x000D_
background-color: #eee; _x000D_
border: 1px solid #666666; _x000D_
border-spacing: 5px; /* cellspacing:poor IE support for this */_x000D_
}_x000D_
.div-table-row {_x000D_
display: table-row;_x000D_
width: auto;_x000D_
clear: both;_x000D_
}_x000D_
.div-table-col {_x000D_
float: left; /* fix for buggy browsers */_x000D_
display: table-column; _x000D_
width: 200px; _x000D_
background-color: #ccc; _x000D_
}<body>_x000D_
<form id="form1">_x000D_
<div class="div-table">_x000D_
<div class="div-table-row">_x000D_
<div class="div-table-col" align="center">Customer ID</div>_x000D_
<div class="div-table-col">Customer Name</div>_x000D_
<div class="div-table-col">Customer Address</div>_x000D_
</div>_x000D_
<div class="div-table-row">_x000D_
<div class="div-table-col">001</div>_x000D_
<div class="div-table-col">002</div>_x000D_
<div class="div-table-col">003</div>_x000D_
</div>_x000D_
<div class="div-table-row">_x000D_
<div class="div-table-col">xxx</div>_x000D_
<div class="div-table-col">yyy</div>_x000D_
<div class="div-table-col">www</div>_x000D_
</div>_x000D_
<div class="div-table-row">_x000D_
<div class="div-table-col">ttt</div>_x000D_
<div class="div-table-col">uuu</div>_x000D_
<div class="div-table-col">Mkkk</div>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
</form>_x000D_
</body>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
Source: Stackoverflow.com