Abhishek Pandey Abhishek Pandey - 3 years ago 184
CSS Question

Collapse borders of div

I need to make following design.

enter image description here

I know this seems easy, but not with dynamic binding.

First of all grid tiles will be repeated dynamically (

v-for
of
vuejs
or
ng-repreat
of
angularjs
), so I can't use
table
and
rows
, I can only use
columns
.

So I have used
flexbox
, everything seems good, but doubled borders are creating issue.

I have tried this, but it won't work when there are less than 4
cols
in a row.

.grid-table .row .col:nth-last-child(1),
.grid-table .row .col:nth-last-child(2),
.grid-table .row .col:nth-last-child(3),
.grid-table .row .col:nth-last-child(4) {
border-bottom: 0;
}

.grid-table .row .col:nth-child(4n) {
border-right: 0;
}


Question: How can I collapse borders, and the solutions should be responsive too.



* {
box-sizing: border-box;
font-family: monospace;
}

.grid-table {
border: 1px solid #ddd;
}

.grid-table .row {
margin: 0;
display: flex;
flex-wrap: wrap;
}

.grid-table .row .col {
padding: 20px;
border: 1px solid #ddd;
width: 25%;
height: 70px;
margin: 0;
}

.grid-table-tile .checkbox-custom {
width: auto;
}

.grid-table-head .col.m12.s12 {
height: 40px;
background: #e7e7e7;
padding: 10px 20px;
flex: 1 1;
}

.grid-table .row .col:nth-last-child(1),
.grid-table .row .col:nth-last-child(2),
.grid-table .row .col:nth-last-child(3),
.grid-table .row .col:nth-last-child(4) {
border-bottom: 0;
}

.grid-table .row .col:nth-child(4n) {
border-right: 0;
}

<div class="grid-table">
<div class="row grid-table-head">
<div class="col m12 s12">Complaint Type</div>
</div>
<div class="row">
<div class="col m3 s12">
<div class="grid-table-tile">
<div class="checkbox-custom">
<input type="checkbox" class="filled-in" id="ctype-0" />
<label for="ctype-0">Parking Issue</label>
</div>
<div class="grid-table-tile-title"></div>
</div>
</div>
<div class="col m3 s12">
<div class="grid-table-tile">
<div class="checkbox-custom">
<input type="checkbox" class="filled-in" id="ctype-0" />
<label for="ctype-0">Parking Issue</label>
</div>
<div class="grid-table-tile-title"></div>
</div>
</div>
<div class="col m3 s12">
<div class="grid-table-tile">
<div class="checkbox-custom">
<input type="checkbox" class="filled-in" id="ctype-0" />
<label for="ctype-0">Parking Issue</label>
</div>
<div class="grid-table-tile-title"></div>
</div>
</div>
<div class="col m3 s12">
<div class="grid-table-tile">
<div class="checkbox-custom">
<input type="checkbox" class="filled-in" id="ctype-0" />
<label for="ctype-0">Parking Issue</label>
</div>
<div class="grid-table-tile-title"></div>
</div>
</div>
<div class="col m3 s12">
<div class="grid-table-tile">
<div class="checkbox-custom">
<input type="checkbox" class="filled-in" id="ctype-0" />
<label for="ctype-0">Parking Issue</label>
</div>
<div class="grid-table-tile-title"></div>
</div>
</div>
<div class="col m3 s12">
<div class="grid-table-tile">
<div class="checkbox-custom">
<input type="checkbox" class="filled-in" id="ctype-0" />
<label for="ctype-0">Parking Issue</label>
</div>
<div class="grid-table-tile-title"></div>
</div>
</div>
<div class="col m3 s12">
<div class="grid-table-tile">
<div class="checkbox-custom">
<input type="checkbox" class="filled-in" id="ctype-0" />
<label for="ctype-0">Parking Issue</label>
</div>
<div class="grid-table-tile-title"></div>
</div>
</div>

</div>
</div>





Dynamic demo with vuejs

Answer Source

Hope the below code helps.

In the css ,the below line matches the first element of the last row

.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4)

How means.for example n will 0,1,2 ...

so .grid-table .row .col:nth-child(4n+1) matches 1st and 5th element in our case.

when n is 0

.grid-table .row .col:nth-child(4(0)+1):nth-last-child(-0+4) equates to

.grid-table .row .col:nth-child(1):nth-last-child(4)

first condition .grid-table .row .col:nth-child(1) selects the 1 div

second condition .grid-table .row .col:nth-last-child(4) selects the 4 div from last

since 1 & 4 is not the same element ,the condition fails

when n is 1;

.grid-table .row .col:nth-child(4(1)+1):nth-last-child(-1+4) equates to

.grid-table .row .col:nth-child(5):nth-last-child(3)

first-condition:.grid-table .row .col:nth-child(5) matches 5th element

Second condition: .grid-table .row .col:nth-last-child(3) matches 3rd element from last(which is actually 5th element from the first)

since the first & second condition pointing to the same element.

.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4) selects the 5th element.

the next line

.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4) ~ .col selects the elements after 5th ie 6th and 7th in our case

In this way we can select the last row of the grid and remove border bottom

enter image description here

* {
  box-sizing: border-box;
  font-family: monospace;
}

.grid-table {
  border: 1px solid #ddd;
}

.grid-table .row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.grid-table .row .col {
  padding: 20px;
  border-right: 1px solid #ddd;
  border-bottom:1px solid #ddd;
  width: 25%;
  height: 70px;
  margin: 0;
}

.grid-table-tile .checkbox-custom {
  width: auto;
}

.grid-table-head .col.m12.s12 {
  height: 40px;
  background: #e7e7e7;
  padding: 10px 20px;
  flex: 1 1;
}

.grid-table .row .col:nth-child(4n) {
  border-right: 0;
}

.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4),
.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4) ~ .col {
  border-bottom:none;
}
<div class="grid-table">
  <div class="row grid-table-head">
    <div class="col m12 s12">Complaint Type</div>
  </div>
  <div class="row">
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>

  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download