From 12d49f19b0b4e5735480d8a1c4cf789f16eac24a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Fri, 25 Feb 2022 13:58:08 -0800
Subject: [PATCH] Remove thicker border on table thead elements

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
---
 scss/_tables.scss                       |  8 +++---
 site/assets/scss/_content.scss          |  4 +++
 site/content/docs/5.1/content/tables.md | 36 +++++++++++++++++++++++++
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/scss/_tables.scss b/scss/_tables.scss
index 2045111043..c523e6677f 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -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
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index fa290dabc8..3dd380ef70 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -45,6 +45,10 @@
       }
     }
 
+    thead {
+      border-bottom: 2px solid currentColor;
+    }
+
     th,
     td {
       &:first-child {
diff --git a/site/content/docs/5.1/content/tables.md b/site/content/docs/5.1/content/tables.md
index 88f9157621..577e3ef84c 100644
--- a/site/content/docs/5.1/content/tables.md
+++ b/site/content/docs/5.1/content/tables.md
@@ -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.