Skip to content

Add .table-card for rounded tables #42832

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mdo wants to merge 2 commits into
base: v6-dev
Choose a base branch
from
+170 −0
Open

Add .table-card for rounded tables #42832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab08a94
feat(tables): add `.table-card` for rounded tables
mdo Aug 12, 2026
a5a84aa
fix(tables): silence stylelint on `.table-card` cell selectors
mdo Aug 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions scss/content/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -176,6 +177,34 @@ $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.
// 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
//
// Generate `.table-responsive` classes that act as container query contexts
Expand Down
141 changes: 141 additions & 0 deletions site/src/content/docs/content/tables.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,147 @@ Add `.table-borderless` for a table without borders.

<Table class="table table-borderless" theme="dark" />

## 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`.

<Example code={`<div class="border rounded overflow-hidden">
<table class="table table-striped mb-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<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>John</td>
<td>Doe</td>
<td>@social</td>
</tr>
</tbody>
</table>
</div>`} customMarkup={`<div class="border rounded overflow-hidden">
<table class="table table-striped mb-0">
...
</table>
</div>`} />

### 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.

<Example code={`<div class="table-card">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<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>John</td>
<td>Doe</td>
<td>@social</td>
</tr>
</tbody>
</table>
</div>`} customMarkup={`<div class="table-card">
<table class="table table-hover">
...
</table>
</div>`} />

Combine it with a responsive wrapper when the table can overflow:

<ResizableExample code={`<div class="table-responsive table-card">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>`} />

## Small tables

Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half.
Expand Down