Make it possible to change default alignment & allow to inherit alignment from table...

diff --git a/scss/_tables.scss b/scss/_tables.scss
index d1fbdc21d2f28f8f2029e945cad0c03498dbc95c..20177384b5722b6a5b4840b05bd8a0cd733b39e5 100644 (file)
--- 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 4cab2f5f3028ae4ad7936ef0e345b39da6e6af36..f376e9dfba572201334043ff3fc67c31588d5482 100644 (file)
--- 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 f29e525f4af363939d2d787220a5ce61159aeaff..4a029ace7d053b5d9ed5361214f40d9811c8612e 100644 (file)
--- 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.