Add demo for multi-row headers

Add sample styles to show what would be required for border-collapse: separate
uswds · thisisdano · Feb 26, 2024 · Dec 20, 2022 · Dec 20, 2022 · Apr 17, 2023
commit 3b03d79dccb91c329750f88a757f56c2fb58947a
diff --git a/packages/usa-table/src/usa-table.twig b/packages/usa-table/src/usa-table.twig
@@ -15,10 +15,14 @@
 
   <thead>
     <tr>
-      {% for th in thead %}
-        <th scope="{{ th.scope|default('col') }}">{{ th.title }}</th>
-      {% endfor %}
-    </tr>
+    // DEMO ONLY - do not include in final production
+        <th rowspan="2">Federal Budget<br> Baseline Projections</th>
+        <th colspan="2" scope="colgroup" class="text-center">2017</th>
+      </tr>
+      <tr>
+        <th scope="col" class="text-right">%GDP</th>
+        <th scope="col" class="text-right">USD*</th>
+      </tr>
   </thead>
   <tbody>
     {% for row in tbody %}

diff --git a/packages/uswds-core/src/styles/mixins/general/table.scss b/packages/uswds-core/src/styles/mixins/general/table.scss
@@ -357,16 +357,34 @@ $table-unsorted-icon-color: get-color-token-from-bg(
 }
 
 @mixin usa-table--sticky-header {
-  thead {
-    th {
-      background-color: color($theme-table-header-background-color);
-      position: sticky;
-      top: -1px;
+  border: 1px solid color($theme-table-border-color);
+  border-collapse: separate;
+  border-spacing: 0;
+
+  td, th {
+    border: 1px solid #1b1b1b;
+    border-left: none;
+    border-top: none;
+
+    &:last-child {
+      border-right: none;
     }
   }
 
-  th[data-sortable] {
+  tbody tr:last-child {
+    td, th {
+      border-bottom: none;
+    }
+  }
+
+  thead {
+    background: #1b1b1b;
     position: sticky;
+    top: -1px;
+
+    th {
+      background-color: color($theme-table-header-background-color);
+    }
   }
 }