<div>边框折叠不完全折叠

Question

我有一个由角度ng-repeat创建的相邻div的小部件。

它看起来像这样（除了forst和last的垂直边框是2px，这表明边框没有塌陷：

我希望它看起来像这样，除了第一个方框的左边框。 （css指定没有左边框）

。

我当然可以在第一个框上设置border-style: solid来获得左边框，但是我正在使用AngularJs以编程方式创建这些小部件，这意味着我必须正确的逻辑才能在第一个框上使用不同的CSS小部件比其他7小部件。但是，如果折叠按预期方式工作，似乎应该可以在所有div上使用相同的CSS来获得所需的东西。

在这里，我使用了当前的CSS以及在主题的各个帖子中看到的所有小技巧，以避免出现垂直双边框。

.container {
    display: flex;
    flex-direction: row;
    margin-left: 5px;
}
.item  {
   display: table-cell;
   border: 1px solid gray;
   border-spacing: 0px;
   border-left-style: none;
   background-color:  #fffff7;
   border-collapse: collapse;
   box-sizing: border-box;
}

Answer 1

border-collapse对表单元格样式的元素没有任何作用，它与display:table一起使用。

您的代码看起来像这样，因为您对每个元素都应用了1px宽边框，导致它们彼此相邻堆叠并变成2px。

因为您没有提供HTML，所以我创建了一些简单的内容，但这应该使您了解如何使用flex-box来处理边框。

.container {
  display: flex;
  flex-direction: row;
  margin-left: 5px;
}
.container > div {
  display: table-cell;
  border: 1px solid gray;
  border-left: 0;
  border-spacing: 0px;
  background-color:  #fffff7;
  padding: 5px;
  font-size: 20px;
}

.container > div:first-child{
  border-left: 1px solid gray;
}
  

<div class="container">
  <div>O</div>
  <div>O</div>
  <div>O</div>
  <div>O</div>
  <div>O</div>
  <div>O</div>
  <div>O</div>
  <div>O</div>
</div>

P.S。您可能应该为此使用网格而不是flexbox