Dynamic CSS border depends on number of contents - html

Question

I'm not sure what is this called, and already searched it on google but doesnt found what I want,
but here is what I want to looks like
Can someone help me to achieve this? or maybe what is this called?
and if there are only 1 content, then no border at all
and, I'm using div not table tag

Answer 1

It's taken from codepen but modified as per your requirements.
page.html
<table class="table">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
<table class="table" style="margin-top:30px;">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
<table class="table" style="margin-top:30px;">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
<tr class="row">
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
<table class="table" style="margin-top:30px;">
<tbody class="table-body">
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
<tr class="row">
<td class="cell"><span>Cool</span></td>
<td class="cell"><span>Cool</span></td>
</tr>
</tbody>
</table>
page.css
.cell {
border-collapse: collapse;
border: 1px solid #000;
padding: 5px;
}
.cell span{
background-color: #000;
color: #fff;
display: block;
padding: 10px;
}
.table {
border-collapse: collapse;
border-style: hidden;
}
.table-head > .row {
border-collapse: collapse;
border: 2px solid pink;
}
See the screenshot
http://prnt.sc/pdptlg

Answer 2

try checking out this example, it shows a table with inner borders only, without the outer borders.
.cell {
border-collapse: collapse;
border: 1px solid pink;
padding: 5px 10px;
}
.table {
border-collapse: collapse;
border-style: hidden;
}
.table-head > .row {
border-collapse: collapse;
border: 2px solid pink;
}
<table class="table">
<tbody class="table-body">
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
</tbody>
</table>
Taken from https://codepen.io/sirinity/pen/dDsLx

Answer 3

One way only using pure css. Hope this help
.container {
display: flex;
flex-wrap: wrap;
width: 150px;
}
.wrapper {
width: 50px;
height: 50px;
padding: 5px;
border: 0 solid;
}
.content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
background-color: #030;
}
.wrapper:nth-of-type(odd) {
border-right-width: 1px;
}
.wrapper:nth-of-type(odd), .wrapper:nth-of-type(even) {
border-bottom-width: 1px;
}
.wrapper:last-child, .wrapper:nth-last-of-type(-n+2):not(:nth-child(even)) {
border-bottom-width: 0;
}
<div class="container">
<div class="wrapper"><div class="content">1</div></div>
<div class="wrapper"><div class="content">2</div></div>
<div class="wrapper"><div class="content">3</div></div>
<div class="wrapper"><div class="content">4</div></div>
<div class="wrapper"><div class="content">5</div></div>
<div class="wrapper"><div class="content">6</div></div>
<div class="wrapper"><div class="content">7</div></div>
</div>

Answer 4

You can do it with css pseudo-classes
More info here: Css pseudo-classes
Yout HTML dosnt change:
<table class="table">
<tbody class="table-body">
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
<tr class="row">
<td class="cell">Cool</td>
<td class="cell">Cool</td>
</tr>
</tbody>
</table>
in css:
.table {
border-collapse: collapse;
border-style: hidden;
}
.cell {
padding: 5px 10px;
}
.row:nth-of-type(1n+1) {
border-bottom: 2px solid pink;
}
.cell:nth-of-type(2n-1) {
border-right: 2px solid pink;
}
Explanation:
Just skip first row to set top border:
.row:nth-of-type(1n+1) {
border-bottom: 2px solid pink;
}
and then, set border only to odd cells:
.cell:nth-of-type(2n-1) {
border-right: 2px solid pink;
}
Code here
Hope it helps you.
Edit: Sorry but i didnt notice that you are not using table tags, Hải Bùi response is the way for that, my css only works properly with tables.