How to make borders collapse on a div

Question

Suppose I have markup like  http   jsfiddle net R8eCr 1    lt div class  container  gt       lt div class  column  gt           lt div class  cell  gt  lt  div gt           lt div class  cell  gt  lt  div gt           lt div class  cell  gt  lt  div gt       lt  div gt       lt div class  column  gt           lt div class  cell  gt  lt  div gt           lt div class  cell  gt  lt  div gt           lt div class  cell  gt  lt  div gt       lt  div gt       lt div class  column  gt           lt div class  cell  gt  lt  div gt           lt div class  cell  gt  lt  div gt           lt div class  cell  gt  lt  div gt       lt  div gt           lt  div gt    Then CSS   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      -webkit-box-sizing  border-box      -moz-box-sizing  border-box      box-sizing  border-box      I have the outer div with display  table  border-collapse  collapse  and cells with display  table-cell why do they still not collapse  What am I missing here    By the way there maybe variable number of cells in a column so I can t only have borders on one side

User · Answer

Use simple negative margin rather than using display table.

Updated in fiddle JS Fiddle

.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;
}

User · Answer

Example of using border-collapse  separate  as  container displayed as table   ol type  I   gt li    display  table    border-collapse  separate    border-spacing  1rem

User · Answer

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

User · Answer

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

User · Answer

Why not use outline  it is what you want outline 1px solid red

User · Answer

You could also use negative margins    x000D   x000D   column   x000D    float  left  x000D    overflow  hidden  x000D    width  120px  x000D    x000D   cell   x000D    border  1px solid red  x000D    width  120px  x000D    height  20px  x000D    box-sizing  border-box  x000D    x000D   cell not  first-child    x000D    margin-top  -1px  x000D    x000D   column not  first-child   gt   cell   x000D    margin-left  -1px  x000D    x000D   lt div class  container  gt  x000D     lt div class  column  gt  x000D       lt div class  cell  gt  lt  div gt  x000D       lt div class  cell  gt  lt  div gt  x000D       lt div class  cell  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  column  gt  x000D       lt div class  cell  gt  lt  div gt  x000D       lt div class  cell  gt  lt  div gt  x000D       lt div class  cell  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  column  gt  x000D       lt div class  cell  gt  lt  div gt  x000D       lt div class  cell  gt  lt  div gt  x000D       lt div class  cell  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  column  gt  x000D       lt div class  cell  gt  lt  div gt  x000D       lt div class  cell  gt  lt  div gt  x000D       lt div class  cell  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  column  gt  x000D       lt div class  cell  gt  lt  div gt  x000D       lt div class  cell  gt  lt  div gt  x000D       lt div class  cell  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

[css] How to make borders collapse (on a div)?

Examples related to css