Transparent borders for tables

I had to style a table where the rows should have a colored background but should be separated from each other. When using a transparent border for the table cells, I found out, that the background color of the cells was painting also the area beneath the borders, i.e. the transparent borders would have the same color as the inner area of the cells. Using the background color of the table's parent element didn't work, because the table is used on multiple pages with varying background colors.

After some research I stumbled about the CSS property background-clip, which controls what part of the box-model of an element receives the background color. The default value is border-box, but there are also the values padding-box and content-box. The one I needed was padding-box which colors also the elements padding area but not its border:

th, td {
    padding: 0.5rem 1ch;
    background-color: #ffe5fe;
    border: 0 solid transparent;
    border-width: 2px 1px 2px 0;
    background-clip: padding-box;
}

There's also a fourth value text which allows to use the background color or image to fill only the shape of the letters.

This article has been published on on my blog. Here's a list of all articles if you're interested in this kind of stuff.

Tags: til,CSS
References: