diff --git a/scss/_tables.scss b/scss/_tables.scss index d5b3cddf213c..5ba241ab6f0f 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -1,3 +1,5 @@ +// stylelint-disable comment-empty-line-before + // // Basic Bootstrap table // @@ -8,11 +10,17 @@ color: $table-color; vertical-align: $table-cell-vertical-align; background-color: $table-bg; // Reset for nesting within parents with `background-color`. + border-color: $table-border-color; th, td { padding: $table-cell-padding; - border-bottom: $table-border-width solid $table-border-color; + // Table cells will only inherit if you use longhand properties + /* clean-css ignore:start */ + border-color: inherit; + border-bottom-style: solid; + border-bottom-width: $table-border-width; + /* clean-css ignore:end */ } tbody { @@ -21,11 +29,14 @@ thead th { vertical-align: bottom; - border-bottom-color: $table-head-border-color; } tbody + tbody { - border-top: (2 * $table-border-width) solid $table-border-color; + /* clean-css ignore:start */ + border-color: inherit; + border-top-style: solid; + border-top-width: (2 * $table-border-width); + /* clean-css ignore:end */ } } @@ -47,18 +58,14 @@ // Add or remove borders all around the table and between all the columns. .table-bordered { - border: $table-border-width solid $table-border-color; + border-width: $table-border-width; th, td { - border: $table-border-width solid $table-border-color; - } - - thead { - th, - td { - border-bottom-width: 2 * $table-border-width; - } + /* clean-css ignore:start */ + border-style: solid; + border-width: $table-border-width; + /* clean-css ignore:end */ } } @@ -75,25 +82,33 @@ // // Default zebra-stripe styles (alternating gray and transparent backgrounds) +// stylelint-disable selector-max-type .table-striped { - tbody tr:nth-of-type(#{$table-striped-order}) { - background-color: $table-accent-bg; + > tbody > tr:nth-of-type(#{$table-striped-order}) { + > td, + > th { + background-image: linear-gradient($table-accent-bg, $table-accent-bg); + } } } +// stylelint-enable selector-max-type // Hover effect // // Placed here since it has to come after the potential zebra striping +// stylelint-disable selector-max-type .table-hover { - tbody tr { - &:hover { + > tbody > tr:hover { + > td, + > th { color: $table-hover-color; - background-color: $table-hover-bg; + background-image: linear-gradient($table-hover-bg, $table-hover-bg); } } } +// stylelint-enable selector-max-type // Table backgrounds @@ -108,60 +123,6 @@ @include table-row-variant(active, $table-active-bg); -// Dark styles -// -// Same table markup, but inverted color scheme: dark background and light text. - -// stylelint-disable-next-line no-duplicate-selectors -.table { - .thead-dark { - th { - color: $table-dark-color; - background-color: $table-dark-bg; - border-color: $table-dark-border-color; - } - } - - .thead-light { - th { - color: $table-head-color; - background-color: $table-head-bg; - border-color: $table-border-color; - } - } -} - -.table-dark { - color: $table-dark-color; - background-color: $table-dark-bg; - - th, - td, - thead th { - border-color: $table-dark-border-color; - } - - &.table-bordered { - border: 0; - } - - &.table-striped { - tbody tr:nth-of-type(#{$table-striped-order}) { - background-color: $table-dark-accent-bg; - } - } - - &.table-hover { - tbody tr { - &:hover { - color: $table-dark-hover-color; - background-color: $table-dark-hover-bg; - } - } - } -} - - // Responsive tables // // Generate series of `.table-responsive-*` classes for configuring the screen diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1a85165dc2e3..50880fcfb68b 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -77,7 +77,15 @@ $utilities: map-merge( "border-color": ( property: border-color, class: border, - values: map-merge($theme-colors, ("white": $white)) + values: map-merge( + $theme-colors, + ( + "white": $white, + "gray-500": $gray-500, + "gray-700": $gray-700, + "black": $black + ) + ) ), // Sizing utilities "width": ( @@ -412,6 +420,9 @@ $utilities: map-merge( ( "body": $body-bg, "white": $white, + "black": black, + "gray-400": $gray-400, + "gray-600": $gray-600, "transparent": transparent ) ) diff --git a/scss/_variables.scss b/scss/_variables.scss index e4268c3f56cb..3317792d83fa 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -457,27 +457,16 @@ $table-cell-padding-sm: .25rem !default; $table-cell-vertical-align: top !default; -$table-color: $body-color !default; +$table-color: null !default; $table-bg: null !default; $table-accent-bg: rgba($black, .05) !default; -$table-hover-color: $table-color !default; +$table-hover-color: null !default; $table-hover-bg: rgba($black, .075) !default; $table-active-bg: $table-hover-bg !default; $table-border-width: $border-width !default; $table-border-color: $border-color !default; -$table-head-bg: $gray-200 !default; -$table-head-color: $gray-700 !default; -$table-head-border-color: $gray-700 !default; - -$table-dark-color: $white !default; -$table-dark-bg: $gray-800 !default; -$table-dark-accent-bg: rgba($white, .05) !default; -$table-dark-hover-color: $table-dark-color !default; -$table-dark-hover-bg: rgba($white, .075) !default; -$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; - $table-striped-order: odd !default; $table-caption-color: $text-muted !default; diff --git a/scss/mixins/_table-row.scss b/scss/mixins/_table-row.scss index 517229e1a729..80c9648c7e12 100644 --- a/scss/mixins/_table-row.scss +++ b/scss/mixins/_table-row.scss @@ -1,39 +1,11 @@ -// Tables - @mixin table-row-variant($state, $background, $border: null) { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. .table-#{$state} { - &, - > th, - > td { - background-color: $background; - } + background-color: $background; @if $border != null { - th, - td, - thead th, - tbody + tbody { - border-color: $border; - } - } - } - - // Hover states for `.table-hover` - // Note: this is not available for cells or rows within `thead` or `tfoot`. - .table-hover { - $hover-background: darken($background, 5%); - - .table-#{$state} { - &:hover { - background-color: $hover-background; - - > td, - > th { - background-color: $hover-background; - } - } + border-color: $border; } } } diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index f264b523570b..18136efe73ae 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -59,6 +59,10 @@ } } + thead { + border-color: $gray-900; + } + // Prevent breaking of code td:first-child > code { white-space: nowrap; diff --git a/site/content/docs/4.3/content/tables.md b/site/content/docs/4.3/content/tables.md index 12aac11c9360..85b5b5db19ea 100644 --- a/site/content/docs/4.3/content/tables.md +++ b/site/content/docs/4.3/content/tables.md @@ -8,7 +8,9 @@ toc: true ## Overview -Due to the widespread use of `` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any `
`, then extend with our optional modifier classes or custom styles. **All table styles are inherited in Bootstrap**, meaning any nested tables will be styled in the same manner as the parent. +Due to the widespread use of `
` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any `
`, then extend with our optional modifier classes or custom styles. + +**All table styles are inherited in Bootstrap**, meaning any nested tables will be styled in the same manner as the parent. This keeps our selectors fast and lean, and ensures any custom CSS you need is as lightweight as possible, too. Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. @@ -45,14 +47,47 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
{{< /example >}} +Since `.table` styles are inherited, nested tables are styled just like their parent. In addition, we've explicitly written our CSS to allow `border` styles to be inherited (normally `border-color` defaults to the current text `color`). + +For example, to make your table headers stand out more, consider using a `.border-dark` utility on just the `` (or if you prefer, on every ``). + +{{< example >}} + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1.........
+{{< /example >}} + +Can't add classes yourself? Change it via custom Sass or CSS. + +{{< highlight scss >}} +thead { + border-color: $gray-900; +} +{{< /highlight >}} + ## Options ### Inverted -You can also invert the colors—with light text on dark backgrounds—with `.table-dark`. +Invert the colors of a table—with light text on dark backgrounds—via [utility classes]({{< docsref "/utilities/api" >}}). Below we've added three classes to accomplish this: `.bg-dark`, `.text-white`, and `.border-gray-700`. {{< example >}} - +
@@ -84,12 +119,10 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta
#
{{< /example >}} -### Striped rows - -Use `.table-striped` to add zebra-striping to any table row within the ``. +And because this happens with utilities, you have some flexibility in how you style your tables relative to their context. For example, **assuming your page is already dark gray** with lighter text, you don't need to set every utility on the ``—just `.border-gray-700`. -{{< example >}} -
+{{< example class="bg-dark text-white" >}} +
@@ -121,8 +154,12 @@ Use `.table-striped` to add zebra-striping to any table row within the ``
#
{{< /example >}} +### Bordered + +Add `.table-bordered` for borders on all sides of the table and cells. + {{< example >}} - +
@@ -146,20 +183,53 @@ Use `.table-striped` to add zebra-striping to any table row within the `` - - +
#
3Larrythe BirdLarry the Bird @twitter
{{< /example >}} -### Bordered +For this dark table, we've assumed a `background-color` and `color` is set by a parent element like `` to help show the ``'s outer border. If that's not the case for you, remember to add `.bg-dark` and `.text-white` to the `
`. -Add `.table-bordered` for borders on all sides of the table and cells. +{{< example class="bg-dark text-white" >}} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+{{< /example >}} + +### No borders + +Add `.table-borderless` for a table without borders. {{< example >}} - +
@@ -190,8 +260,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.
#
{{< /example >}} +`.table-borderless` can also be used on dark tables. + {{< example >}} - +
@@ -222,12 +294,14 @@ Add `.table-bordered` for borders on all sides of the table and cells.
#
{{< /example >}} -### No borders +### Striped rows -Add `.table-borderless` for a table without borders. +Use `.table-striped` to add zebra-striping to any table row within the ``. You can customize which rows are highlighted by changing the `$table-striped-order` variable from `odd` (default) to `even`. + +To ensure background colors also work with striped rows, we use a `background-image` gradient that will overlay onto any `background-color`. {{< example >}} - +
@@ -251,17 +325,18 @@ Add `.table-borderless` for a table without borders. - + +
#
3Larry the BirdLarrythe Bird @twitter
{{< /example >}} -`.table-borderless` can also be used on dark tables. +Works on dark backgrounds: {{< example >}} - +
@@ -285,7 +360,43 @@ Add `.table-borderless` for a table without borders. - + + + + + +
#
3Larry the BirdLarrythe Bird@twitter
+{{< /example >}} + +And also works with table color classes: + +{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -294,7 +405,7 @@ Add `.table-borderless` for a table without borders. ### Hoverable rows -Add `.table-hover` to enable a hover state on table rows within a ``. +Add `.table-hover` to enable a hover state on table rows within a ``. To ensure background colors also work with hovered rows, we use a `background-image` gradient that will overlay onto any `background-color`. {{< example >}}
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird @twitter
@@ -328,8 +439,44 @@ Add `.table-hover` to enable a hover state on table rows within a ``.
{{< /example >}} +And with hoverable striped tables: + +{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+{{< /example >}} + +`.table-hover` also works on dark tables: + {{< example >}} - +
@@ -360,6 +507,40 @@ Add `.table-hover` to enable a hover state on table rows within a ``.
#
{{< /example >}} +As well as table row colors: + +{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+{{< /example >}} + ### Small tables Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half. @@ -435,9 +616,9 @@ Table cells of `` are always vertical aligned to the bottom. Table cells {{< /example >}} -### Variants +## Theme colors -Use contextual classes to color table rows or individual cells. +Use contextual classes from the [our theme colors]({{< docsref "/getting-started/theming" >}}) (generated by the `$theme-colors` Sass map) to color your table rows or individual cells.
@@ -492,10 +673,10 @@ Use contextual classes to color table rows or individual cells. {{< /highlight >}} -Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{< docsref "/utilities/colors" >}}) to achieve similar styles. +For dark tables, we recommend using our [text or background utilities]({{< docsref "/utilities/colors" >}}) to achieve similar styles.
-
+
@@ -575,15 +756,106 @@ Regular table background variants are not available with the dark table, however {{< partial "callout-warning-color-assistive-technologies.md" >}} {{< /callout >}} +## Nesting + +{{< example >}} +
#
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
+ + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
AFirstLast
BFirstLast
CFirstLast
+
3Larrythe Bird@twitter
+{{< /example >}} + + ## Anatomy ### Table head -Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make ``s appear light or dark gray. +Similar to tables and dark tables, use utility classes to create different colors `` elements. Here we're using a combination of background-color (`.bg-*`), border-color (`.border-*`), and text color (`.color-`) to create different looks. {{< example >}} - + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+ + + @@ -612,9 +884,15 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
# First
+{{< /example >}} + +### Table bodies +When multiple ``s are present, we automatically add a thicker border between them. By default, this border is twice as think as the rest of the table borders. + +{{< example >}} - + @@ -629,12 +907,16 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `. + + + + diff --git a/site/content/docs/4.3/utilities/borders.md b/site/content/docs/4.3/utilities/borders.md index 5cf1ed29db69..8081bf7f36a1 100644 --- a/site/content/docs/4.3/utilities/borders.md +++ b/site/content/docs/4.3/utilities/borders.md @@ -32,7 +32,7 @@ Use border utilities to add or remove an element's borders. Choose from all bord ## Border color -Change the border color using utilities built on our theme colors. +Change the border color using utilities built on our theme colors. We've also included a subset of our gray colors to provide more flexibility. {{< example class="bd-example-border-utils" >}} {{< border.inline >}} @@ -40,7 +40,11 @@ Change the border color using utilities built on our theme colors. {{- end -}} {{< /border.inline >}} + + + + {{< /example >}} ## Border-radius diff --git a/site/content/docs/4.3/utilities/colors.md b/site/content/docs/4.3/utilities/colors.md index 62a35b059ca5..2762bccc067e 100644 --- a/site/content/docs/4.3/utilities/colors.md +++ b/site/content/docs/4.3/utilities/colors.md @@ -33,6 +33,8 @@ Similar to the contextual text color classes, easily set the background of an el
.bg-{{ .name }}
{{- end -}} {{< /colors.inline >}} +
.bg-gray-600
+
.bg-gray-400
.bg-white
.bg-transparent
{{< /example >}}
# FirstOtto @mdo
2 Jacob Thornton @fat
3 Larry