1

I'm trying to create a calendar with for each day a box, separated by small margins. Problem: the margins are not applied. I added red borders around the dates, and as you can see in the code there's no margin between borders. I removed all extraneous CSS, and even temorarily added an !important property (which I hate, go figure how desperate I am), no avail. I absolutely can't see what I'm doing wrong, so any help is appreciated.

Code is here.


edit
I added the code referred to in hrunting's answer

#calendar table {
  border-collapse: separate;
  border-spacing: 2px 2px;
}

to my code, but it doesn't seem to make any difference. (I removed the red border. You should see when it works if you have separate boxes for the dates.)

stevenvh
  • 2,971
  • 9
  • 41
  • 54
  • I edited my answer to include the removal of the `cellspacing=0` attribute. This will get you to the result you need. – hrunting Feb 03 '13 at 13:54

2 Answers2

1

Read this StackOverflow answer here.

Basically, internal table elements don't have margin applied to them (and padding is not what you want because that spacing goes inside the border, not outside). You need to use the border-spacing attribute along with the border-collapse attribute to get the look you want.

Also, remove the cellspacing=0 HTML attribute from your <table> definition.

Community
  • 1
  • 1
hrunting
  • 3,857
  • 25
  • 23
  • Thanks, I'll have a look at it. I already knew padding is no solution, I was commenting to the other answer while you were posting yours. – stevenvh Feb 03 '13 at 13:30
  • +1 Thanks for the edit, that seems to fix it. I'll probably accept this one too, but I normally wait a day for that to give others to answer as well. – stevenvh Feb 03 '13 at 14:06
0

Table cells can not have margins directly applied to them. You can read the specs on tables here: http://www.w3.org/TR/CSS2/tables.html and see that table cells have their own box model. You can add padding like @Praveen suggested, but padding has limitations. For instance if you want to increase the space outside of the border that won't work. Padding actually increases the space within the cell and therefore has a different effect.

possible duplicate of this question: CSS Cell Margin

Taken from that question:

What's the "right" way then? If you are looking to replace the cellspacing attribute of the table, then border-spacing (with border-collapse disabled) is a replacement. However, if per cell "margins" are required, I am not sure how that can be correctly achieved using CSS. The only hack I can think of is to use padding as above, avoid any styling of the cells (background colours, borders, etc) and instead use container DIVs inside the cells to implement such styling.

Community
  • 1
  • 1
DMTintner
  • 14,405
  • 5
  • 35
  • 32
  • Thanks for your reply. I don't think the question is a duplicate. The asker seemed perfectly happy with the accepted answer, which only tells how to get content further apart, but it doesn't work for my problem. – stevenvh Feb 03 '13 at 13:45