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.
The border-collapse property in CSS is used to set the borders of the cell present inside the table and tells whether these cells will share a common border or not. Syntax: border-collapse: separate|collapse|initial|inherit; Default Value : Its default value is separate.
The border-collapse CSS property sets whether cells inside a <table> have shared or separate borders.
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; }
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With