From ab08a94bc81a641c933339b7aabc5348fdd4b89a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 11 Aug 2026 22:31:25 -0700 Subject: [PATCH 1/2] feat(tables): add `.table-card` for rounded tables People often nest tables in cards to get a bordered, rounded look. That creates padding, margin, and double-border edge cases. Add a `.table-card` wrapper that clips and rounds the table itself, and document the utilities-only equivalent. Closes #39774 --- scss/content/_tables.scss | 25 ++++ site/src/content/docs/content/tables.mdx | 141 +++++++++++++++++++++++ 2 files changed, 166 insertions(+) diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss index 781d1f2c797e..a0ba93fce337 100644 --- a/scss/content/_tables.scss +++ b/scss/content/_tables.scss @@ -2,6 +2,7 @@ @use "../config" as *; @use "../functions" as *; @use "../layout/breakpoints" as *; +@use "../mixins/border-radius" as *; @use "../mixins/tokens" as *; // stylelint-disable custom-property-no-missing-var-function @@ -176,6 +177,30 @@ $table-striped-columns-order: even !default; } } + // Card-like tables + // + // Round and clip a table without nesting it in a `.card`. Apply to a wrapper + // around `.table`, or combine with `.table-responsive` on the same element. + // Same look as `.border.rounded.overflow-hidden` + `.mb-0` on the table. + + .table-card { + margin-bottom: var(--spacer); + overflow: hidden; + border: var(--border-width) solid var(--border-color-translucent); + @include border-radius(var(--radius-7)); + + > .table, + > [class*="table-responsive"] > .table { + margin-bottom: 0; + } + + // Drop the last row border so it does not stack on the wrapper border + > .table > :not(caption):last-child > *:last-child > *, + > [class*="table-responsive"] > .table > :not(caption):last-child > *:last-child > * { + border-block-end-width: 0; + } + } + // Responsive tables // // Generate `.table-responsive` classes that act as container query contexts diff --git a/site/src/content/docs/content/tables.mdx b/site/src/content/docs/content/tables.mdx index 5a65188abdbd..9299319bd50a 100644 --- a/site/src/content/docs/content/tables.mdx +++ b/site/src/content/docs/content/tables.mdx @@ -243,6 +243,147 @@ Add `.table-borderless` for a table without borders. +## Card-like tables + +Need a bordered, rounded table without nesting it in a [card]([[docsref:/components/card]])? Wrap the table and clip the corners. + +### With utilities + +Compose [border]([[docsref:/utilities/border]]), [border radius]([[docsref:/utilities/border-radius]]), and [overflow]([[docsref:/utilities/overflow]]) utilities. Drop the table’s bottom margin with `.mb-0`. + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
+`} customMarkup={`
+ + ... +
+
`} /> + +### With `.table-card` + +Use `.table-card` for the same look. It rounds corners like a card, clips cell backgrounds, and removes the last row’s bottom border so it does not stack on the wrapper. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
+`} customMarkup={`
+ + ... +
+
`} /> + +Combine it with a responsive wrapper when the table can overflow: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
+ `} /> + ## Small tables Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half. From a5a84aa1e09fc914a72de9b89bedce37bf7effba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 12 Aug 2026 08:09:24 -0700 Subject: [PATCH 2/2] fix(tables): silence stylelint on `.table-card` cell selectors The last-row border reset needs the same deep universal cell path as `.table`, plus a wrapper and optional responsive nest. That trips the compound, universal, and combinator limits. --- scss/content/_tables.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss index a0ba93fce337..b162a0150966 100644 --- a/scss/content/_tables.scss +++ b/scss/content/_tables.scss @@ -194,11 +194,15 @@ $table-striped-columns-order: even !default; margin-bottom: 0; } - // Drop the last row border so it does not stack on the wrapper border + // Drop the last row border so it does not stack on the wrapper border. + // Same universal cell targeting as `.table`; wrapper + optional responsive + // nest pushes compound/combinator counts over the defaults. + // stylelint-disable selector-max-compound-selectors, selector-max-universal, selector-max-combinators > .table > :not(caption):last-child > *:last-child > *, > [class*="table-responsive"] > .table > :not(caption):last-child > *:last-child > * { border-block-end-width: 0; } + // stylelint-enable selector-max-compound-selectors, selector-max-universal, selector-max-combinators } // Responsive tables