rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-13 13:29:25 +01:00
Code Issues Actions Packages Releases Activity

Remove thicker border on table thead elements

Browse Source 
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
This commit is contained in:
Mark Otto 2022-02-25 13:58:08 -08:00 committed by Mark Otto
parent 0cf36335d6
commit 12d49f19b0
3 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scss/_tables.scss
View File

@ -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

4
site/assets/scss/_content.scss
View File

@ -45,6 +45,10 @@
}
}
thead {
border-bottom: 2px solid currentColor;
}
th,
td {
&:first-child {

36
site/content/docs/5.1/content/tables.md
View File

@ -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.