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 /site/content/docs | |
| 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
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/5.1/content/tables.md | 36 |
1 files changed, 36 insertions, 0 deletions
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. |