重叠边框 div

我想创建一个带有div标签的表。我只使用两个类，效果很好。
唯一的问题是表格内单元格的边框具有表格边框的双倍宽度，看起来很丑。我知道原因是所有单元格周围都有边框，但我无法修复它。我已经在其他帖子中尝试了一些解决方案，但在这种情况下它不起作用。
有人可以帮我吗？多谢。请注意，我不想添加更多类。

.row { 
height: 100%;
display: flex;
width: 100%;
flex-wrap: wrap;
}
.col {
border: solid 2px blue;
padding: 5px;
margin: 0;
min-height: 1px;
flex-grow: 1;
max-width: 100%;
text-align: center; 
}

<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
</div>

您可以添加负边距top和等于边框宽度的left。

.row { 
height: 100%;
display: flex;
width: 100%;
flex-wrap: wrap;
}
.col {
border: solid 2px blue;
padding: 5px;
margin: 0;
min-height: 1px;
flex-grow: 1;
max-width: 100%;
text-align: center; 
margin-left: -2px;
margin-top: -2px;
}

<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
</div>

在某些情况下，您可以添加 CSS 以覆盖边框...

.row {
height: 100%;
display: flex;
width: 100%;
flex-wrap: wrap;
}
.col {
border: solid 2px blue;
border-top: none;
padding: 5px;
margin: 0;
min-height: 1px;
flex-grow: 1;
max-width: 100%;
text-align: center;
}
.col+.col {
border-left: none;
}
.row:first-of-type .col {
border-top: solid 2px blue;
}
.row .row .col {
border-top: none;
}

<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
</div>

您可以添加一个类来包装内容并添加一些样式，例如：

.table{
border: 2px solid blue;
}
.row { 
height: 100%;
display: flex;
width: 100%;
flex-wrap: wrap;
}
.col {
border: solid 2px blue;
padding: 5px;
margin: 0;
min-height: 1px;
flex-grow: 1;
max-width: 100%;
text-align: center; 
}

<div class="table">
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
</div>
</div>
</div>

这是因为您在col类下的边框样式应用于两个相邻的列[单元格]。如果您不想添加类，请尝试在 CSS 中提供"id"和定义样式，或提供内联样式。通常避免在 CSS 中使用负值。

.CSS：

.row { 
height: 100%;
display: flex;
width: 100%;
flex-wrap: wrap;
}
.col {
border-right: solid 2px black;
border-top: solid 2px black;
padding: 5px;
margin: 0;
min-height: 1px;
flex-grow: 1;
max-width: 100%;
text-align: center; 
}

.HTML：

<div style="border: solid 2px black;">
<div class="row">
<div style="border-top: none" class="col">x</div>
<div style="border-top: none; border-right: none" class="col">x</div>
</div>
<div class="row">
<div style="border-right: none" class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
<div class="col">x</div>
<div style="border-right: none" class="col">x</div>
</div>
<div class="row">
<div class="row">
<div class="col">x</div>
<div style="border-right: none" class="col">x</div>
</div>
<div class="row">
<div class="col">x</div>
<div style="border-right: none" class="col">x</div>
</div>
</div>
</div>

@Duanxx

我的回答解释：

请看下面的代码。对于代码 1

<html>
<head>
<style type="text/css">
.parentDiv{
background-color: black;
justify-content: space-around;
display: flex;
}
.childDiv{
width: 50%;
height:100px;
font-size: 30px;
margin: 10px 10px;
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="childDiv" style="background-color: pink">Child 1</div>
<div class="childDiv" style="background-color: bisque">Child 2</div>
</div>
</body>
</html>

现在看看这个：

<html>
<head>
<style type="text/css">
.parentDiv{
background-color: black;
justify-content: space-around;
display: flex;
}
.childDiv{
width: 50%;
height:100px;
font-size: 30px;
margin: -5px 10px;
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="childDiv" style="background-color: pink">Child 1</div>
<div class="childDiv" style="background-color: bisque">Child 2</div>
</div>
</body>
</html>

对于代码 2

比较两者。孩子应该适合父母。这就是不使用负边距的原因。

相关内容

最新更新

热门标签：