Below is a snippet of code with div elements that each have a 1px border defined in the labelStyle class.
.labelStyle {
text-align: left;
padding: 0px;
font-weight: 0px;
font-size: 8px;
border: 1px solid;
margin-bottom: 0;
border-collapse: collapse;
}
<div class="col-sm-6" style="padding-left: 0px;padding-right: 2px;">
<div class="row">
<label class="col-sm-6 labelStyle">Name</label>
<label class="col-sm-6 labelStyle">{{name}}</label>
</div>
<div class="row">
<label class="col-sm-6 labelStyle">Number</label>
<label class="col-sm-6 labelStyle">{{num}}</label>
</div>
<div class="row">
<label class="col-sm-6 labelStyle">Zip</label>
<label class="col-sm-6 labelStyle">{{zip}}</label>
</div>
</div>
After rendering, the adjacent labels appear darker due to having borders on all sides. I attempted to use the border-collapse property but it did not work as intended. I aim to achieve a sort of border-collapse functionality where each label has top and side borders defined, without a bottom border. However, the last label should have a bottom border. What would be the most effective approach to implement this? It is important to note that these elements are contained within a DIV, not a table.