Adding .visually-hidden to table results in it taking up space

[philgyford]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

If I apply the visually-hidden class to a <table> element then in some browsers it appears to take up space still, resulting in scrollbars, even though the table isn't visible.

1. Create a page with a <table class="visually-hidden"></table> element.
2. Add enough contents to it that it would be longer than the page

On macOS, in Safari 26.0.1 and Chrome 141.0.7390.55 I see this problem. Firefox 141 does not exhibit the issue.

Reduced test cases

Here's a codepen - see the vertical scrollbar in the apparently empty main area: https://codepen.io/philgyford/pen/dPGNyoE

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome, Safari

What version of Bootstrap are you using?

v5.3.8

[coliff]

interesting find... looks like adding this CSS works as a workaround.

.visually-hidden > * {
  max-height: 0;
  display: inline-block;
}