diff options
| author | Mark Otto <[email protected]> | 2022-02-25 13:58:08 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2022-02-28 11:21:53 -0800 |
| commit | 12d49f19b0b4e5735480d8a1c4cf789f16eac24a (patch) | |
| tree | b1013c5b77663f12996ce96f8cda11ce204e67d7 | |
| parent | 0cf36335d66bf47e03587f798cf3fc5666eb7994 (diff) | |
| download | bootstrap-12d49f19b0b4e5735480d8a1c4cf789f16eac24a.tar.xz bootstrap-12d49f19b0b4e5735480d8a1c4cf789f16eac24a.zip | |
Remove thicker border on table thead elements
Use the new .table-group-divider to create your own dividers as desired. Would love to find a better way to handle border-color for this, but for now, this is at least opt-in.
I've applied it by default in another way for our docs tables to help differentiate our content vs our components.
Fixes #35342
| -rw-r--r-- | scss/_tables.scss | 8 | ||||
| -rw-r--r-- | site/assets/scss/_content.scss | 4 | ||||
| -rw-r--r-- | site/content/docs/5.1/content/tables.md | 36 |
3 files changed, 43 insertions, 5 deletions
diff --git a/scss/_tables.scss b/scss/_tables.scss index 204511104..c523e6677 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -39,13 +39,11 @@ > thead { vertical-align: bottom; } - - // Highlight border color between thead, tbody and tfoot. - > :not(:first-child) { - border-top: (2 * $table-border-width) solid $table-group-separator-color; - } } +.table-group-divider { + border-top: calc(2 * $table-border-width) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list +} // // Change placement of captions with a class diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index fa290dabc..3dd380ef7 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -45,6 +45,10 @@ } } + thead { + border-bottom: 2px solid currentColor; + } + th, td { &:first-child { diff --git a/site/content/docs/5.1/content/tables.md b/site/content/docs/5.1/content/tables.md index 88f915762..577e3ef84 100644 --- a/site/content/docs/5.1/content/tables.md +++ b/site/content/docs/5.1/content/tables.md @@ -260,6 +260,42 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` {{< table class="table table-dark table-sm" >}} +## Table group dividers + +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"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody class="table-group-divider"> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{{< /example >}} + ## Vertical alignment Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed. |