CODEWITHSUNDEEP
css
Jiew Meng
Jiew Meng

Reputation: 88207

How to make borders collapse (on a div)?

I have the outer div with display: table; border-collapse: collapse; and cells with display: table-cell. Why do they still not collapse?

There maybe variable number of cells in a column so I can't only have borders on one side.

.container {
  display: table;
  border-collapse: collapse;
}

.column {
  float: left;
  overflow: hidden;
  width: 120px;
}

.cell {
  display: table-cell;
  border: 1px solid red;
  width: 120px;
  height: 20px;
  box-sizing: border-box;
}
<div class="container">
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Upvotes: 106

Views: 163409

Answers (8)

iamjustcoder
iamjustcoder

Reputation: 4852

Use a simple negative margin rather than using display: table.

.container {
  border-style: solid;
  border-color: red;
  border-width: 1px 0 0 1px;
  display: inline-block;
}

.column {
  float: left;
  overflow: hidden;
}

.cell {
  border: 1px solid red;
  width: 120px;
  height: 20px;
  margin: -1px 0 0 -1px;
}

.clearfix {
  clear: both;
}
<div class="container">
  <div class="column" style="background:red">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column" style="background:blue">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column" style="background:green">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column" style="background:yellow">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column" style="background:black">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="clearfix"></div>
</div>

Upvotes: 116

Muslimbek
Muslimbek

Reputation: 119

Why not use outline? It is what you want:

outline: 1px solid red;

Here I show many variations of border collapsing. (using Bootstrap grid): https://codepen.io/leonardo1024/pen/KgbNGr

Upvotes: 11

Hushme
Hushme

Reputation: 3144

.container {
  display: table;
  border-collapse: collapse
}

.column {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid red;
  width: 120px;
  height: 20px;
  box-sizing: border-box;
}
<div class="container">
  <div class="column">
    <div class="cell">ddd</div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Upvotes: 47

rrain
rrain

Reputation: 51

You can use borders in pseudo-elements with margins & paddings. It works with flex-wrap in multiple rows / cols.

.parent {
  display: flex; /* your container */
  flex-flow: column;

  position: relative;
  ::before{
    content:'';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    border: 1px solid #424041; /* your border */
  }
  padding: 1px 0 0 1px; /* <border-width> 0 0 <border-width> */
}

.child{
  position: relative;
  ::before{
    content:'';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    border: 1px solid #424041; /* your border */
  }
  margin: -1px 0 0 -1px; /* -<border-width> 0 0 -<border-width> */
}

.parentAndChild{
  display: flex; /* your container */
  flex-flow: row wrap;

  position: relative;
  ::before{
    content:'';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    border: 1px solid #424041; /* your border */
  }
  margin: -1px 0 0 -1px; /* -<border-width> 0 0 -<border-width> */
  padding: 1px 0 0 1px; /* <border-width> 0 0 <border-width> */
}

Upvotes: 0

Dmytro Yurchenko
Dmytro Yurchenko

Reputation: 214

Example of using border-collapse: separate; as

  • container displayed as table:

    ol[type="I"]>li{
  display: table;
  border-collapse: separate;
  border-spacing: 1rem;
}

    Upvotes: 0

    • mpen
    mpen

    Reputation: 282895

    You could also use negative margins:

    .column {
  float: left;
  overflow: hidden;
  width: 120px;
}
.cell {
  border: 1px solid red;
  width: 120px;
  height: 20px;
  box-sizing: border-box;
}
.cell:not(:first-child) {
  margin-top: -1px;
}
.column:not(:first-child) > .cell {
  margin-left: -1px;
}
    <div class="container">
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

    Upvotes: 6

    user1032559
    user1032559

    Reputation: 1647

    Instead using border use box-shadow:

      box-shadow: 
    2px 0 0 0 #888, 
    0 2px 0 0 #888, 
    2px 2px 0 0 #888,   /* Just to fix the corner */
    2px 0 0 0 #888 inset, 
    0 2px 0 0 #888 inset;

    Demo: http://codepen.io/Hawkun/pen/rsIEp

    Upvotes: 108

    Bhojendra Rauniyar
    Bhojendra Rauniyar

    Reputation: 85545

    You need to use display: table-row instead of float: left; to your column and obviously as @Hushme correct your diaplay: table-cell to display: table-cell;

     .container {
    display: table;
    border-collapse: collapse;
}
.column {
    display: table-row;
    overflow: hidden;
    width: 120px;
}
.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;
}

    demo

    Upvotes: 5

    Related Questions