Question

我正在尝试使用div标签而不是表标签

创建一个表

我在我的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

更改

边界崩溃：倒塌;

到

边界崩溃：独立;

或

删除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;
}

使用div标签而不是表时发出边框

2 个答案: