Change Color of All Four Borders Even With `border-collapse: collapse;`

Avatar of Daniel Jauch
Daniel Jauch on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

The border-collapse property is great for making borders even all around <table> cells. It makes for a clean look that I actually prefer.

But, there is something that can cause issues with how a browser draws the cells and their respective borders. Each cell is placed under the previous one when being drawn in order. This means that if tables have different colored borders, those borders are hidden on some sides.

The Problem

In the code example below, hover over cells to see how borders can be hidden behind each other.

See the Pen Table border collapse step 1 by Daniel (@gooseofmusic) on CodePen.

Since z-index doesn’t work on cells inside a <table>, we have to work with the content inside the cells.

The Solution

Step 1

Fair warning: this solution will employ the use of negative margins. For those of you who don’t like negative margins, avert your eyes.

First, we put a wrapper around the content inside the cell. Move the border, padding, etc to the inside content to match.

See the Pen Table border collapse step 2 by Daniel (@gooseofmusic) on CodePen.

This alone will actually reverse the problem: the borders on the bottom and right show up on top.

Step 2

From there, we also have to add z-index to the :hover state so it stacks above the other elements. Because we’re z-indexing content inside the table cell, rather than the <td> itself, it works.

See the Pen Table border collapse step 3 by Daniel (@gooseofmusic) on CodePen.

Make sure the z-index is not included in any transition or you’ll see the previously hidden borders “swipe” into view rather than fade.