1

This doesn't seem to show borders, although that's supposed to be the only reason for the CSS property border-collapse:

http://jsfiddle.net/pz6azgj8/

Did I make some mistake here? Or isn't this but not implemented in current browsers (FF35/IE11)?


jsFiddle screenshot

AxD
  • 2,714
  • 3
  • 31
  • 53
  • 1
    `tr` isn't a valid target for your border declaration. Try doing it on `td` or on `table` – Josh Burgess Feb 04 '15 at 16:40
  • Where in the CSS3 spec is `tr` supposed to be an invalid element? I can't find that statement there. – AxD Feb 04 '15 at 21:05
  • 1
    The problem isn't the CSS3 spec. `border-collapse` is part of the CSS2.1&2 specs. The problem is that when you set the `border-collapse` to `separate`, you're changing the border rendering mode, which changes which elements are valid to receive a border. In the border rendering mode you've triggered (and the default mode, btw), you're saying that a `tr` is not valid to receive a border, as a `tr` has no border rather than to space the rows/cells via `border-spacing` ... hence the `border-collapse: separate`. Make sense? – Josh Burgess Feb 04 '15 at 21:30

2 Answers2

2

http://www.w3.org/TR/CSS21/tables.html

states this:

17.6 Borders
[...]
'border-collapse'
Value: collapse | separate | inherit
Initial: separate
[...] The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model. [...]

17.6.1 The separated borders model
[...] Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements). [...]

17.6.2 The collapsing border model
In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group.

You say

This doesn't seem to show borders, although that's supposed to be the only reason for the CSS property border-collapse

It probably is indeed one reason for the existence of that property to allow borders for <tr>s - but the other way around: separated is the default-value and collapse allows you to create those borders around table-rows.

Matteo B.
  • 3,906
  • 2
  • 29
  • 43
  • Might as well also add into this an answer for the question in the title -- How can I see the table cell borders if border collapse is separate? -- which is to apply the border to the `td` elements. – misterManSam Feb 05 '15 at 00:31
-2

Do border-collapse:collapse on the table CSS, it fixes it.

Jim Leeder
  • 126
  • 11
  • 1
    I know, but I'm wondering why the borders disappear if `border-collapse: separate` is set. I can't see a reason for this happening. I actually want the border to be separated. – AxD Feb 04 '15 at 21:06