Skip to content

fixed Please adjust default table-striped color when dark mode is active Fixes #39032

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.

Sign up for GitHub

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

Closed
wants to merge 1 commit into from
Closed

fixed Please adjust default table-striped color when dark mode is active Fixes #39032

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 30 additions & 18 deletions site/content/docs/5.3/content/tables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,19 @@ Use contextual classes to color tables, table rows or individual cells.
</div>

{{< highlight html >}}

<!-- On tables -->{{< table.inline >}}

{{- range (index $.Site.Data "theme-colors") }}

<table class="table-{{ .name }}">...</table>
{{- end -}}
{{< /table.inline >}}

<!-- On rows -->{{< table.inline >}}

{{- range (index $.Site.Data "theme-colors") }}

<tr class="table-{{ .name }}">...</tr>
{{- end -}}
{{< /table.inline >}}
Expand All @@ -82,13 +87,13 @@ Use contextual classes to color tables, table rows or individual cells.

Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.

{{< table class="table table-striped" >}}
{{< table class="table table-dark table-striped" >}}

### Striped columns

Use `.table-striped-columns` to add zebra-striping to any table column.

{{< table class="table table-striped-columns" >}}
{{< table class="table table-dark table-striped-columns" >}}

These classes can also be added to table variants:

Expand All @@ -104,20 +109,20 @@ These classes can also be added to table variants:

Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.

{{< table class="table table-hover" >}}

{{< table class="table table-dark table-hover" >}}

{{< table class="table table-dark table-dark table-hover" >}}

These hoverable rows can also be combined with the striped rows variant:

{{< table class="table table-striped table-hover" >}}
{{< table class="table table-dark table-striped table-hover" >}}

### Active tables

Highlight a table row or cell by adding a `.table-active` class.

<div class="bd-example">
<table class="table">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
Expand Down Expand Up @@ -149,7 +154,7 @@ Highlight a table row or cell by adding a `.table-active` class.
</div>

```html
<table class="table">
<table class="table table-dark">
<thead>
...
</thead>
Expand Down Expand Up @@ -242,25 +247,25 @@ Behind the scenes it looks like this:

Add `.table-bordered` for borders on all sides of the table and cells.

{{< table class="table table-bordered" >}}
{{< table class="table table-dark table-bordered" >}}

[Border color utilities]({{< docsref "/utilities/borders#border-color" >}}) can be added to change colors:

{{< table class="table table-bordered border-primary" >}}
{{< table class="table table-dark table-bordered border-primary" >}}

### Tables without borders

Add `.table-borderless` for a table without borders.

{{< table class="table table-borderless" >}}
{{< table class="table table-dark table-borderless" >}}

{{< table class="table table-dark table-borderless" >}}

## Small tables

Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half.

{{< table class="table table-sm" >}}
{{< table class="table table-dark table-sm" >}}

{{< table class="table table-dark table-sm" >}}

Expand All @@ -269,7 +274,8 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding`
Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<tfoot>`—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time).

{{< example >}}
<table class="table">

<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
Expand Down Expand Up @@ -370,7 +376,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
Border styles, active styles, and table variants are not inherited by nested tables.

<div class="bd-example">
<table class="table table-striped table-bordered">
<table class="table table-dark table-striped table-bordered">
<thead>
<tr>
<th scope="col">#</th>
Expand Down Expand Up @@ -427,7 +433,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
</div>

```html
<table class="table table-striped table-bordered">
<table class="table table-dark table-striped table-bordered">
<thead>
...
</thead>
Expand Down Expand Up @@ -607,15 +613,17 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.

<div class="bd-example">
<table class="table">
<table class="table table-dark">
<caption>List of users</caption>
{{< partial "table-content" >}}
</table>
</div>

```html
<table class="table table-sm">
<caption>List of users</caption>
<table class="table table-dark table-sm">
<caption>
List of users
</caption>
<thead>
...
</thead>
Expand All @@ -628,7 +636,8 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
You can also put the `<caption>` on the top of the table with `.caption-top`.

{{< example >}}
<table class="table caption-top">

<table class="table table-dark caption-top">
<caption>List of users</caption>
<thead>
<tr>
Expand Down Expand Up @@ -666,6 +675,7 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.

{{< callout warning >}}

##### Vertical clipping/truncation

Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
Expand Down Expand Up @@ -751,6 +761,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
{{< tables.inline >}}
{{ range $.Site.Data.breakpoints }}
{{ if not (eq . "xs") }}

<div class="bd-example">
<div class="table-responsive{{ .abbr }}">
<table class="table">
Expand Down Expand Up @@ -813,6 +824,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
{{< tables.inline >}}
{{- range $.Site.Data.breakpoints -}}
{{- if not (eq . "xs") }}

<div class="table-responsive{{ .abbr }}">
<table class="table">
...
Expand Down