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

我相信如果你申请

table-layout:fixed

...到.div-table并设置单元格的宽度，它们应该按照您喜欢的方式运行。

Answer 2

改变

边框折叠：折叠；

到

边框折叠：分开；

或者

删除边框折叠

变化

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