The border-collapse property is for use on <table> elements (or elements made to behave like a table through display: table or display: inline-table). There are two values:
separate (default) - in which all table cells have their own independent borders and there may be space between those cells as well.
collapse - in which both the space and the borders between table cells collapse so there is only one border and no space between cells.
table {
border-collapse: separate; /* Or do nothing, this is default */
border-spacing: 3px; /* Only works if border-collapse is separate */
}
I used this and it did exactly what I was looking for to fix an IE9 issue but it took away my box-shadow. Any idea how to get the best of both of these?
su
You wrote:
/* Or do nothing, this is default */ on both CSS examples
Didn’t understand.
Simon, the default is “separate” – ignore the /* comment */
Simple but very usefull thing to work with tables. Btw. nice idea with this almanac :)
I used this and it did exactly what I was looking for to fix an IE9 issue but it took away my box-shadow. Any idea how to get the best of both of these?
Thanks!
Kiefer
@email to fax: your question is out of topic.
Btw you might want to consider removing the position absolute from the elements.
Hello,
I use #wrap { display:table;border-collapse: collapse; border:1px solid #cccc},
So how can I get the border to be complete?
I created a jsfiddle with my complete code (except for the images). http://jsfiddle.net/qHVk3/
Thank you