CSS make an absolutely positioned HTML element opaque without setting background color

I have HTML that looks like this:

<html>
<head>
<style>
.globalpopup {
  margin: 0px;
  padding: 2px;
  position: absolute;
  opacity: 1;
  background: inherit;
}
</style>
</head>
<body>
 <table class="globalpopup"><tr><td><span>!!</span></td></tr>
 </table>
 <div>This is a document. There's a ton of stuff here.
</body>
</html>

The table background is transparent even though the background of the text within it (the span tag) is opaque.

How do I make the table opaque in entirety without setting a background color? There are no set colors anywhere; browser defaults are used. If you think you know what the browser defaults are, then you don't.

Copying the background color from body with javascript didn't help. document.body.style.backgroundColor is the empty string.

Somebody asked a similar question awhile back and got the answer of background: inherit. This case is different somehow and backgorund: inherit doesn't work.

Solution

The root color is accessible trough the Canvas color value:

.globalpopup {
  margin: 0px;
  padding: 2px;
  position: absolute;
  opacity: 1;
  background: Canvas;
}

<table class="globalpopup"><tr><td><span>!!</span></td></tr></table>
<div>This is a document. There's a ton of stuff here.

And if one wants to access it through JS, then they can append an element with that color value set somewhere and grab the computed value:

const getCanvasColor = () => {
  const tester = document.createElement("span");
  tester.style.color = "Canvas";
  document.body.append(tester);
  const computed = getComputedStyle(tester).color;
  tester.remove();
  return computed;
}
console.log(getCanvasColor());