feat(table): make the wrap argument work with data tables

assets/scss/common/_variables-dart.scss

@@ -26,6 +26,7 @@ $navbar-height:                 h.$navbar-height;
 $navbar-offset:                 h.$navbar-offset;
 $navbar-offset-xs:              h.$navbar-offset-xs;
 $navbar-size:                   h.$navbar-size;
+$main-breakpoint:               h.$main-breakpoint;
 $overlay-offset:                h.$overlay-offset;
 $primary:                       h.$primary;
 $secondary:                     h.$secondary;

assets/scss/components/_table.scss

@@ -11,8 +11,33 @@
     padding-right: 1rem;
 }
 
-.table-border-bottom-wrap {
-    border-bottom-style: none !important
+// Bootstrap stripes every odd row. A wrapped table renders two rows per record - the data row
+// and the row holding the wrapped last column - so `odd` would stripe every record instead of
+// alternating. Recompute the stripes per record pair.
+.table-wrap.table-striped {
+    > tbody > tr:nth-of-type(n) > * {
+        --bs-table-color-type: initial;
+        --bs-table-bg-type: initial;
+    }
+
+    > tbody > tr:nth-of-type(4n + 1) > * {
+        --bs-table-color-type: var(--bs-table-striped-color);
+        --bs-table-bg-type: var(--bs-table-striped-bg);
+    }
+}
+
+@include media-breakpoint-down(#{$main-breakpoint}) {
+    // Below the breakpoint the data row and the row holding the wrapped column must read as a
+    // single record, so the data row drops its bottom border.
+    .table-border-bottom-wrap {
+        border-bottom-style: none !important;
+    }
+
+    // Here the second row of each pair is visible too, so it joins its record's stripe.
+    .table-wrap.table-striped > tbody > tr:nth-of-type(4n + 2) > * {
+        --bs-table-color-type: var(--bs-table-striped-color);
+        --bs-table-bg-type: var(--bs-table-striped-bg);
+    }
 }
 
 @if $enable-dark-mode {

config/postcss.config.js

@@ -38,6 +38,24 @@ const purgecss = purgeCSSPlugin({
       'both',
       'desc',
       'asc',
+      // Hinode wrapped tables.
+      //
+      // On a data table `table-wrap` and `table-border-bottom-wrap` are applied in the browser by
+      // SimpleDatatables' tableRender hook, so on a site whose only wrapped tables are data tables
+      // they never reach hugo_stats.json at all and would otherwise be purged.
+      'table-wrap',
+      'table-border-bottom-wrap',
+      // `d-none` is also applied by that hook, but a dozen core layouts emit it as well, so it can
+      // never actually be purged. It is listed to record that the wrap depends on it.
+      'd-none',
+      // `d-{breakpoint}-table-cell` reveals the wrapped column above the breakpoint, and
+      // render-table.html is its only emitter in the whole theme. Unlike the classes above it does
+      // reach hugo_stats.json - but PurgeCSS is fed the *previous* build's stats whenever PostCSS
+      // is not deferred to Hugo's post-process phase (`hugo server`, or any non-production build
+      // with style.purge enabled). A site whose committed stats predate its first wrapped table
+      // would therefore lose the rule, leaving the wrapped column's cells on `d-none` alone and so
+      // hidden at every width.
+      /^d-(sm|md|lg|xl|xxl)-table-cell$/,
       // SimpleDatatables search component
       'search-data-table',
       'search-input',