Suppose I have markup like: http://jsfiddle.net/R8eCr/1/
<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>
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.
This question is related to
css
You could also use negative margins:
.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) > .cell {_x000D_
margin-left: -1px;_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="column">_x000D_
<div class="cell"></div>_x000D_
<div class="cell"></div>_x000D_
<div class="cell"></div>_x000D_
</div>_x000D_
<div class="column">_x000D_
<div class="cell"></div>_x000D_
<div class="cell"></div>_x000D_
<div class="cell"></div>_x000D_
</div>_x000D_
<div class="column">_x000D_
<div class="cell"></div>_x000D_
<div class="cell"></div>_x000D_
<div class="cell"></div>_x000D_
</div>_x000D_
<div class="column">_x000D_
<div class="cell"></div>_x000D_
<div class="cell"></div>_x000D_
<div class="cell"></div>_x000D_
</div>_x000D_
<div class="column">_x000D_
<div class="cell"></div>_x000D_
<div class="cell"></div>_x000D_
<div class="cell"></div>_x000D_
</div>_x000D_
</div>
_x000D_
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;
}
Example of using border-collapse: separate; as
ol[type="I"]>li{
display: table;
border-collapse: separate;
border-spacing: 1rem;
}
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;
}
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;
Why not use outline? it is what you want outline:1px solid red;
Source: Stackoverflow.com