From 62b8e849701ed35ada121b0c7060641ee93bb896 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Thu, 18 Jul 2019 07:49:39 +0200
Subject: [PATCH] Make it possible to change default alignment & allow to
inherit alignment from table (#29039)
---
scss/_tables.scss | 6 +++-
scss/_variables.scss | 2 ++
site/content/docs/4.3/content/tables.md | 37 +++++++++++++++++++++++++
3 files changed, 44 insertions(+), 1 deletion(-)
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`
</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.
--
GitLab