diff --git a/scss/_tables.scss b/scss/_tables.scss index d1fbdc21d2..20177384b5 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 4cab2f5f30..f376e9dfba 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 f29e525f4a..4a029ace7d 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` {{< /example >}} +## Vertical alignment + +Table cells of `` are always vertical aligned to the bottom. Table cells in `
` inherit their alignment from `Heading 1 | +Heading 2 | +Heading 2 | +Heading 4 | +
---|---|---|---|
This cell inherits vertical-align: middle; from the table |
+ This cell inherits vertical-align: middle; from the table |
+ This cell inherits vertical-align: middle; from the table |
+ Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. | +
This cell inherits vertical-align: bottom; from the table row |
+ This cell inherits vertical-align: bottom; from the table row |
+ This cell inherits vertical-align: bottom; from the table row |
+ Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. | +
This cell inherits vertical-align: middle; from the table |
+ This cell inherits vertical-align: middle; from the table |
+ This cell is aligned to the top. | +Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. | +