diff options
| author | Martijn Cuppens <[email protected]> | 2019-07-18 07:49:39 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-07-18 08:49:39 +0300 |
| commit | 62b8e849701ed35ada121b0c7060641ee93bb896 (patch) | |
| tree | 551de723236704f8ef60391e8a564a12f97d782f | |
| parent | 99676c780963d3cfe671294a776b738bb4876480 (diff) | |
| download | bootstrap-62b8e849701ed35ada121b0c7060641ee93bb896.tar.xz bootstrap-62b8e849701ed35ada121b0c7060641ee93bb896.zip | |
Make it possible to change default alignment & allow to inherit alignment from table (#29039)
| -rw-r--r-- | scss/_tables.scss | 6 | ||||
| -rw-r--r-- | scss/_variables.scss | 2 | ||||
| -rw-r--r-- | site/content/docs/4.3/content/tables.md | 37 |
3 files changed, 44 insertions, 1 deletions
diff --git a/scss/_tables.scss b/scss/_tables.scss index d1fbdc21d..20177384b 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -6,15 +6,19 @@ width: 100%; margin-bottom: $spacer; color: $table-color; + vertical-align: $table-cell-vertical-align; background-color: $table-bg; // Reset for nesting within parents with `background-color`. th, td { padding: $table-cell-padding; - vertical-align: top; border-bottom: $table-border-width solid $table-border-color; } + tbody { + vertical-align: inherit; + } + td { border-bottom: $table-border-width solid $table-border-color; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 4cab2f5f3..f376e9dfb 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -355,6 +355,8 @@ $hr-margin-y: $spacer !default; $table-cell-padding: .5rem !default; $table-cell-padding-sm: .25rem !default; +$table-cell-vertical-align: top !default; + $table-color: $body-color !default; $table-bg: null !default; $table-accent-bg: rgba($black, .05) !default; diff --git a/site/content/docs/4.3/content/tables.md b/site/content/docs/4.3/content/tables.md index f29e525f4..4a029ace7 100644 --- a/site/content/docs/4.3/content/tables.md +++ b/site/content/docs/4.3/content/tables.md @@ -396,6 +396,43 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` </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 the top by default. + +{{< example >}} +<table class="table align-middle"> + <thead> + <tr> + <th scope="col" class="w-25">Heading 1</th> + <th scope="col" class="w-25">Heading 2</th> + <th scope="col" class="w-25">Heading 2</th> + <th scope="col" class="w-25">Heading 4</th> + </tr> + </thead> + <tbody> + <tr> + <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> + <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> + <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> + <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td> + </tr> + <tr class="align-bottom"> + <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> + <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> + <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> + <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td> + </tr> + <tr> + <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> + <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> + <td class="align-top">This cell is aligned to the top.</td> + <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td> + </tr> + </tbody> +</table> +{{< /example >}} + ### Variants Use contextual classes to color table rows or individual cells. |