Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visually-hidden: Remove position: absolute for captions #37533

Merged
merged 1 commit into from
Jan 6, 2023

Conversation

louismaximepiton
Copy link
Member

@louismaximepiton louismaximepiton commented Nov 22, 2022

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:
image

Bordered modifier with .visually-hidden:
image

Table divider modifier without .visually-hidden:
image

Table divider modifier with .visually-hidden:
image

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

Related issues

NA

@mdo mdo force-pushed the main-lmp-visually-hidden-caption branch from f3f2ad9 to 1f34551 Compare December 29, 2022 06:56
@mdo mdo merged commit 1ed86c9 into twbs:main Jan 6, 2023
@louismaximepiton louismaximepiton deleted the main-lmp-visually-hidden-caption branch January 9, 2023 07:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants