How to Make Borders Collapse (On a Div)

How to make borders collapse (on a div)?

here is a demo

first you need to correct your syntax error its

display: table-cell;

not diaplay: table-cell;

   .container {
    display: table;
    border-collapse:collapse
}
.column {
    display:table-row;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

How to collapse the borders of a set of div tags using CSS?

Could border collapse property help?

The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.

See: http://www.w3schools.com/cssref/pr_border-collapse.asp

table#myTable
{
   border-collapse:collapse;
}

Collapse borders of div

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

Sample Image

* {  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>

How to get 2 separate div borders to collapse?

You need tabular displays in order to use border-collapse:

#menubar {  display: table;  border-collapse: collapse;}#menubar > li {  display: table-cell;  border: 1px solid black;  width: 98px;  background-color: orange;}

<ul id="menubar">  <li>    <a>Kingdom</a>  </li>  <li>    <a>Advisors</a>  </li></ul>

Collapse borders of nested DIVs

The border collapse doesn't work, I got it working with your JsFiddle but you probably have to change it because you're DIVs are dynamically created.

div.box > div.box {
    border-bottom: solid 1px gray;
}

div.box > div.box > div.box:last-child {
    border-bottom: none;
}

div border collapse not quite collapsing

border-collapse doesn't do anything to table-cell styled elements, it's used with display:table.

Your code looks this way because you are applying a 1px wide border to every element, causing them to stack next to eachother and become 2px.

Because you didn't supply HTML I create something simple, but this should give you an idea of how you could handle borders if you want to use 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>

how do you make borders collapse on a span?

Use outline instead of border

.test {  word-wrap: break-word;  outline: 3px solid red;}p {  width: 80%;  margin: auto;}

<p> You should know that <span class="test">this paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</span> The long word will break and wrap to the next line.</p>

How to Make Borders Collapse (On a Div)