"Inherit" background without being transparent?

Question

Is it possible to make an element effectively inherit its background color from its nearest ancestor that has one, without making it transparent? (I realize background-color isn't an inherited property, I'm using the term loosely.)

My specific issue is with sticky table headers: When the table scrolls, the cells sliding up under the headers show through the headers because the headers are transparent.

I could solve it by giving the headers an explicit background color, but then I have to maintain the background color in multiple places (potentially multiple stylesheets). I'd rather have a small bit of reusable CSS I can use...

• ...without explicit colors, and
• ...without requiring CSS variables or similar

(But if the answer is "you have to," well, that's the answer.)

My structure is:

<div class="app">
    <div>
        Irrelevant stuff here
    </div>
    <div class="sticky">
        <table>
            <thead>
                <tr>
                    <th>Column</th>
                </tr>
            </thead>
            <tbody>
                (rows)
            </tbody>
        </table>
    </div>
</div>

Relevant CSS:

table {
    border-collapse: collapse;
}

.app {
    overflow: hidden;
    display: grid;
    grid-template-rows: 20vh 80vh;
    background-color: cornsilk;
}

.sticky {
    overflow: auto;
}

.sticky th {
    position: sticky;
    top: 0;
    /* I don't want to use a color or CSS variable here:
    background-color: cornsilk;
    */
}

Live Example:

/* Fill the page */
html, body {
    padding: 0;
    margin: 0;
    height: 100vh;
    font-family: sans-serif;
}

/* box sizing reset */
html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}

/* No cellspacing in tables by default */
table {
    border-collapse: collapse;
}

.app {
    overflow: hidden;
    display: grid;
    grid-template-rows: 20vh 80vh;
    background-color: cornsilk;
}

.sticky {
    overflow: auto;
}

.sticky th {
    position: sticky;
    top: 0;
    /* I don't want to use a color or CSS variable here:
    background-color: cornsilk;
    */
}

<div class="app">
    <div>
        Irrelevant stuff here
    </div>
    <div class="sticky">
        <table>
            <thead>
                <tr>
                    <th>Column</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>A</td></tr>
                <tr><td>B</td></tr>
                <tr><td>C</td></tr>
                <tr><td>D</td></tr>
                <tr><td>E</td></tr>
                <tr><td>F</td></tr>
                <tr><td>G</td></tr>
                <tr><td>H</td></tr>
                <tr><td>I</td></tr>
                <tr><td>J</td></tr>
                <tr><td>K</td></tr>
                <tr><td>L</td></tr>
                <tr><td>M</td></tr>
                <tr><td>N</td></tr>
                <tr><td>O</td></tr>
                <tr><td>P</td></tr>
                <tr><td>Q</td></tr>
                <tr><td>R</td></tr>
                <tr><td>S</td></tr>
                <tr><td>T</td></tr>
                <tr><td>U</td></tr>
                <tr><td>V</td></tr>
                <tr><td>W</td></tr>
                <tr><td>X</td></tr>
                <tr><td>Y</td></tr>
                <tr><td>Z</td></tr>
                <tr><td>A</td></tr>
                <tr><td>B</td></tr>
                <tr><td>C</td></tr>
                <tr><td>D</td></tr>
                <tr><td>E</td></tr>
                <tr><td>F</td></tr>
                <tr><td>G</td></tr>
                <tr><td>H</td></tr>
                <tr><td>I</td></tr>
                <tr><td>J</td></tr>
                <tr><td>K</td></tr>
                <tr><td>L</td></tr>
                <tr><td>M</td></tr>
                <tr><td>N</td></tr>
                <tr><td>O</td></tr>
                <tr><td>P</td></tr>
                <tr><td>Q</td></tr>
                <tr><td>R</td></tr>
                <tr><td>S</td></tr>
                <tr><td>T</td></tr>
                <tr><td>U</td></tr>
                <tr><td>V</td></tr>
                <tr><td>W</td></tr>
                <tr><td>X</td></tr>
                <tr><td>Y</td></tr>
                <tr><td>Z</td></tr>
                <tr><td>A</td></tr>
                <tr><td>B</td></tr>
                <tr><td>C</td></tr>
                <tr><td>D</td></tr>
                <tr><td>E</td></tr>
                <tr><td>F</td></tr>
                <tr><td>G</td></tr>
                <tr><td>H</td></tr>
                <tr><td>I</td></tr>
                <tr><td>J</td></tr>
                <tr><td>K</td></tr>
                <tr><td>L</td></tr>
                <tr><td>M</td></tr>
                <tr><td>N</td></tr>
                <tr><td>O</td></tr>
                <tr><td>P</td></tr>
                <tr><td>Q</td></tr>
                <tr><td>R</td></tr>
                <tr><td>S</td></tr>
                <tr><td>T</td></tr>
                <tr><td>U</td></tr>
                <tr><td>V</td></tr>
                <tr><td>W</td></tr>
                <tr><td>X</td></tr>
                <tr><td>Y</td></tr>
                <tr><td>Z</td></tr>
                <tr><td>A</td></tr>
                <tr><td>B</td></tr>
                <tr><td>C</td></tr>
                <tr><td>D</td></tr>
                <tr><td>E</td></tr>
                <tr><td>F</td></tr>
                <tr><td>G</td></tr>
                <tr><td>H</td></tr>
                <tr><td>I</td></tr>
                <tr><td>J</td></tr>
                <tr><td>K</td></tr>
                <tr><td>L</td></tr>
                <tr><td>M</td></tr>
                <tr><td>N</td></tr>
                <tr><td>O</td></tr>
                <tr><td>P</td></tr>
                <tr><td>Q</td></tr>
                <tr><td>R</td></tr>
                <tr><td>S</td></tr>
                <tr><td>T</td></tr>
                <tr><td>U</td></tr>
                <tr><td>V</td></tr>
                <tr><td>W</td></tr>
                <tr><td>X</td></tr>
                <tr><td>Y</td></tr>
                <tr><td>Z</td></tr>
                <tr><td>A</td></tr>
                <tr><td>B</td></tr>
                <tr><td>C</td></tr>
                <tr><td>D</td></tr>
                <tr><td>E</td></tr>
                <tr><td>F</td></tr>
                <tr><td>G</td></tr>
                <tr><td>H</td></tr>
                <tr><td>I</td></tr>
                <tr><td>J</td></tr>
                <tr><td>K</td></tr>
                <tr><td>L</td></tr>
                <tr><td>M</td></tr>
                <tr><td>N</td></tr>
                <tr><td>O</td></tr>
                <tr><td>P</td></tr>
                <tr><td>Q</td></tr>
                <tr><td>R</td></tr>
                <tr><td>S</td></tr>
                <tr><td>T</td></tr>
                <tr><td>U</td></tr>
                <tr><td>V</td></tr>
                <tr><td>W</td></tr>
                <tr><td>X</td></tr>
                <tr><td>Y</td></tr>
                <tr><td>Z</td></tr>
            </tbody>
        </table>
    </div>
</div>

In my naïvety I had great hopes for background-color: currentcolor but, well, it does what it says it does: Uses the current color, rather than background color.

(And yes, the table really is for a table, not layout. 😉 )

Answer 1

I don't know of a particularly elegant way to achieve what you're after without variables. These suggestions seem self-evident, but you could write a separate CSS selector to do it:

.app,
.app .sticky th {
  background-color: cornsilk;
}

Or share a common class between them (again, suboptimal):

<div class="app some-other-class">
<th class="some-other-class">

A custom property would be my only other suggestion, but you said you'd like to avoid variables.