css - 使用 div 标签而不是表格时出现边框问题

Question

我正在尝试用 div 标签而不是 table 标签创建一个表格

我在我的 CSS 文件中写了以下内容:

    .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%;
}

我将其应用于我的表格，但边框是根据每个单元格中内容的大小单独出现的。所以有时我会得到双边框...我不能在此处应用高度属性，因为数据来自表格，因此它的大小是动态的我不知道如何从单元格中删除那些双边框并使一行中所有单元格的大小相等。

请帮忙!!!!!

Answer 1

改变

border-collapse:collapse;

到

border-collapse:separate;

或

remove border-collapse

变化

.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{
 display:table;        
border-collapse:separate; 
border:1px solid lightgray; 
 margin-right:1%; margin-left:1%; 
 width:99%;
 font-size:13px; font-family:Verdana;
}