Question

I’m trying to create a table with div tag instead of table tag

I wrote following in my css file:

    .div-table{
 display:table;        
border-collapse:collapse; 
border:1px solid lightgray; 
 margin-right:1%; margin-left:1%; 
 width:99%;
 font-size:13px; font-family:Verdana;
}
.div-table-row1{
display:table-row; 
background-color:White;
 width:33%;
 clear:both;
}
.div-table-col{
float:left;
display:table-column;
border:1px solid lightgray;
width:33%;
}

I applied this to my table but the borders are coming according to the size of content in each cell individually.
So sometimes i get double border…
I cannot apply height attribute here as data coming through tables so it is dynamic in size
I dont know how to remove those double borders from a cell and make all cell’s size in a row equal.

Please help !!!!!

Answer 1

Change

border-collapse:collapse;

to

border-collapse:separate;

or

remove border-collapse

Changes

.div-table{
     display:table;        
    border-collapse:collapse; 
    border:1px solid lightgray; 
     margin-right:1%; margin-left:1%; 
     width:99%;
     font-size:13px; font-family:Verdana;
    }

to

.div-table{
 display:table;        
border-collapse:separate; 
border:1px solid lightgray; 
 margin-right:1%; margin-left:1%; 
 width:99%;
 font-size:13px; font-family:Verdana;
}