Visually-hidden: Remove position: absolute for captions

[louismaximepiton]

Description

Remove the position: absolute; from the visually hidden caption, tried to group it with all .visually-hidden. There's maybe a better way ?

Motivation & Context

Main issue: a positioned (or floating) table caption is understood as an anonymous cell of a table. This behavior leads to have an undeclared cell between the thead and the tbody. This leads to the issue: It removes the border-collapse: collapse; effect. More explanations here.

Visual issue

Bordered modifier without .visually-hidden:

Bordered modifier with .visually-hidden:

Table divider modifier without .visually-hidden:

Table divider modifier with .visually-hidden:

Here is the minimum code:

<table class="table table-bordered">
  <caption class="visually-hidden">Text</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>

Type of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-37533--twbs-bootstrap.netlify.app/docs/5.2/content/tables/

Related issues

NA