Bootstrap 5 table background

[boomzilla]

I'm updating from bootstrap 4 to 5. I have stuff like this:

<button class="btn btn-primary">Click me!</button>
<table class="table">
  <tr>
    <td>
      <button class="btn btn-primary">Click me!</button>
    </td>
  </tr>
</table>

In BS4 this was no problem. Both buttons looked the same. But now, in BS5, the button inside the table shows with an outline but nothing inside until I hover over it, then it looks the same.

The issue seems to be this:

//
// Basic Bootstrap table
//

.table {

...

  // Target th & td
  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
  // stylelint-disable-next-line selector-max-universal
  > :not(caption) > * > * {
    padding: $table-cell-padding-y $table-cell-padding-x;
    background-color: var(--#{$prefix}table-bg);
    border-bottom-width: $table-border-width;
    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
  }

That overrides the background styling from the button classes. I haven't been able to find anyone else having this problem, but maybe that's because searches just return tons of generic stuff about tables and buttons.

Anyone know what's going on here and how to fix it?

[boomzilla]

Oh, FFS...adding <tbody> makes it happy.

[PleegWat]

@boomzilla From the comments, they might fix that at some point...

can you get the btn-primary CSS to be logically after the table CSS?

[boomzilla]

@PleegWat possibly, if I knew what that meant.

[PleegWat]

@boomzilla Typically, for any property, the last matching CSS rule which specifies it takes precedence. So you'd need your rule which generates the background to be applied after the standard one for the class=table descendant, either by being later in the same CSS file or in a CSS file which is specified later in the HTML document.

[error]

@PleegWat said in Bootstrap 5 table background:

Typically, for any property, the last matching CSS rule which specifies it takes precedence

Precedence is determined by specificity, with order being more of a tiebreaker.

[Zenith]

@boomzilla What's double dumb is that browsers you're using (in other words, not IE) often implicitly put it in there if you don't so you shouldn't have had to.

[Tsaukpaetra]

@boomzilla said in Bootstrap 5 table background:

. I haven't been able to find anyone else having this problem,

Technically Hypatia's backend administration site has this problem, if anyone were to visit it.

You know. For kicks.

I think i just assigned extra classes on the ones that really mattered.

[TheCPUWizard]

@boomzilla said in Bootstrap 5 table background:

Oh, FFS...adding <tbody> makes it happy.

Ain't got nobody that I can depend on
Ain't got nobody that I can depend on
Ain't got nobody that I can depend on
Ain't got nobody that I can depend on

-- or --

I ain't got nobody
Nobody cares for me, nobody
Nobody cares for me
I'm so sad and lonely
Sad and lonely, sad and lonely
Won't some sweet mama come and take a chance with me?
'Cause I ain't so bad

[Gribnit]

@TheCPUWizard see, this needed to be written as css, is the problem