How to have a shared dashed border override a solid one?
When using CSS tables or grids with a default border of type solid, how can I override a particular cell/area to have a dashed border instead? Adding a more specific selector does work where the border is not shared, but doesn't work where it is shared. I can see why this would be the default behaviour, but I can't find a way around it. (For example,
For an example please see https://jsfiddle.net/s2nzowxm/.
z-index doesn't help.)For an example please see https://jsfiddle.net/s2nzowxm/.
Table with Specific Cell Border - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
2 Replies
When you use
border-collapse, it means the cells are literally sharing borders. I'm not sure how they decide which border to share, though, but you'll always run into issues like this.
If you need them to be different, you could remove the border-collapse, but make the border-spacing: 0px to remove the space, but let them have their own, unshared borders.
Another option (which may not give you the results you're after) is to use outline instead of border on the ones you want to change. Outlines are painted on top of borders, so if you do used dashed, dotted, etc, you will see the border under, which might not be what you're after, but if you are just changing the color it might work.Thanks. I added colour to the fiddle to make it clearer, but in reality I don't want to change colour; only change solid to dashed. That doesn't work with
outline.
However you have given me a different idea 💡 which should work in the specific context I have.