Table
The native HTML tables styled for different use cases, along with a responsive wrapper.
Examples
Basic usage
| Name |
Email |
Role |
| Ada Lovelace |
ada@example.com |
Admin |
| Grace Hopper |
grace@example.com |
Editor |
| Katherine Johnson |
katherine@example.com |
Viewer |
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ada Lovelace</td>
<td>ada@example.com</td>
<td>Admin</td>
</tr>
<tr>
<td>Grace Hopper</td>
<td>grace@example.com</td>
<td>Editor</td>
</tr>
<tr>
<td>Katherine Johnson</td>
<td>katherine@example.com</td>
<td>Viewer</td>
</tr>
</tbody>
</table>
</div>
Caption
Q3 spending by department, in thousands of dollars
| Department |
Q2 |
Q3 |
Change |
| Engineering |
412 |
438 |
+6.3% |
| Design |
96 |
88 |
-8.3% |
| Support |
121 |
130 |
+7.4% |
<div class="table-wrap">
<table class="table is-striped">
<caption>
Q3 spending by department, in thousands of dollars
</caption>
<thead>
<tr>
<th>Department</th>
<th class="is-num">Q2</th>
<th class="is-num">Q3</th>
<th class="is-num">Change</th>
</tr>
</thead>
<tbody>
<tr>
<td>Engineering</td>
<td class="is-num">412</td>
<td class="is-num">438</td>
<td class="is-num">+6.3%</td>
</tr>
<tr>
<td>Design</td>
<td class="is-num">96</td>
<td class="is-num">88</td>
<td class="is-num">-8.3%</td>
</tr>
<tr>
<td>Support</td>
<td class="is-num">121</td>
<td class="is-num">130</td>
<td class="is-num">+7.4%</td>
</tr>
</tbody>
</table>
</div>
Striped
| Project |
Owner |
Status |
| Atlas migration |
Ada Lovelace |
In progress |
| Billing refresh |
Grace Hopper |
Blocked |
| Onboarding rewrite |
Katherine Johnson |
In review |
| SSO integration |
Hedy Lamarr |
Done |
<div class="table-wrap">
<table class="table is-striped">
<thead>
<tr>
<th>Project</th>
<th>Owner</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Atlas migration</td>
<td>Ada Lovelace</td>
<td>In progress</td>
</tr>
<tr>
<td>Billing refresh</td>
<td>Grace Hopper</td>
<td>Blocked</td>
</tr>
<tr>
<td>Onboarding rewrite</td>
<td>Katherine Johnson</td>
<td>In review</td>
</tr>
<tr>
<td>SSO integration</td>
<td>Hedy Lamarr</td>
<td>Done</td>
</tr>
</tbody>
</table>
</div>
Bordered
| Environment |
Region |
Version |
| Production |
us-east-1 |
3.14.2 |
| Staging |
us-east-1 |
3.15.0-rc.2 |
| Development |
local |
main@HEAD |
<div class="table-wrap">
<table class="table is-bordered">
<thead>
<tr>
<th>Environment</th>
<th>Region</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Production</td>
<td>us-east-1</td>
<td>3.14.2</td>
</tr>
<tr>
<td>Staging</td>
<td>us-east-1</td>
<td>3.15.0-rc.2</td>
</tr>
<tr>
<td>Development</td>
<td>local</td>
<td>main@HEAD</td>
</tr>
</tbody>
</table>
</div>
Compact
| SKU |
Product |
Warehouse |
In stock |
| W-1042 |
Widget, small |
Columbus |
238 |
| W-1043 |
Widget, medium |
Columbus |
117 |
| W-1044 |
Widget, large |
Columbus |
42 |
| G-2201 |
Gadget, basic |
Reno |
1,204 |
| G-2202 |
Gadget, pro |
Reno |
89 |
<div class="table-wrap">
<table class="table is-compact is-striped">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th>Warehouse</th>
<th>In stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>W-1042</td>
<td>Widget, small</td>
<td>Columbus</td>
<td class="is-num">238</td>
</tr>
<tr>
<td>W-1043</td>
<td>Widget, medium</td>
<td>Columbus</td>
<td class="is-num">117</td>
</tr>
<tr>
<td>W-1044</td>
<td>Widget, large</td>
<td>Columbus</td>
<td class="is-num">42</td>
</tr>
<tr>
<td>G-2201</td>
<td>Gadget, basic</td>
<td>Reno</td>
<td class="is-num">1,204</td>
</tr>
<tr>
<td>G-2202</td>
<td>Gadget, pro</td>
<td>Reno</td>
<td class="is-num">89</td>
</tr>
</tbody>
</table>
</div>
Hoverable
| Document |
Last edited |
Shared with |
| Q3 roadmap |
14 min ago |
Team |
| Hiring plan |
Yesterday |
Leadership |
| Architecture RFC |
3 days ago |
Engineering |
<div class="table-wrap">
<table class="table is-hoverable">
<thead>
<tr>
<th>Document</th>
<th>Last edited</th>
<th>Shared with</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q3 roadmap</td>
<td>14 min ago</td>
<td>Team</td>
</tr>
<tr>
<td>Hiring plan</td>
<td>Yesterday</td>
<td>Leadership</td>
</tr>
<tr>
<td>Architecture RFC</td>
<td>3 days ago</td>
<td>Engineering</td>
</tr>
</tbody>
</table>
</div>
Numeric columns
| Invoice |
Issued |
Subtotal |
Tax |
Total |
| INV-00412 |
2026-03-01 |
$1,240.00 |
$99.20 |
$1,339.20 |
| INV-00413 |
2026-03-08 |
$420.50 |
$33.64 |
$454.14 |
| INV-00414 |
2026-03-15 |
$9,876.00 |
$790.08 |
$10,666.08 |
<div class="table-wrap">
<table class="table is-striped">
<thead>
<tr>
<th>Invoice</th>
<th>Issued</th>
<th class="is-num">Subtotal</th>
<th class="is-num">Tax</th>
<th class="is-num">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>INV-00412</td>
<td>2026-03-01</td>
<td class="is-num">$1,240.00</td>
<td class="is-num">$99.20</td>
<td class="is-num">$1,339.20</td>
</tr>
<tr>
<td>INV-00413</td>
<td>2026-03-08</td>
<td class="is-num">$420.50</td>
<td class="is-num">$33.64</td>
<td class="is-num">$454.14</td>
</tr>
<tr>
<td>INV-00414</td>
<td>2026-03-15</td>
<td class="is-num">$9,876.00</td>
<td class="is-num">$790.08</td>
<td class="is-num">$10,666.08</td>
</tr>
</tbody>
</table>
</div>
Responsive overflow
| Order |
Customer |
Shipped |
Carrier |
Tracking |
Items |
Weight |
Subtotal |
Shipping |
Total |
| #18421 |
Ada Lovelace |
2026-03-12 |
UPS |
1Z999AA10123456784 |
3 |
4.2 lb |
$120.00 |
$12.00 |
$132.00 |
| #18422 |
Grace Hopper |
2026-03-12 |
FedEx |
785436728944 |
1 |
0.8 lb |
$38.00 |
$7.50 |
$45.50 |
| #18423 |
Katherine Johnson |
2026-03-13 |
USPS |
9400111899223344556677 |
5 |
6.9 lb |
$224.00 |
$14.00 |
$238.00 |
<div class="table-wrap">
<table class="table is-striped is-compact">
<thead>
<tr>
<th>Order</th>
<th>Customer</th>
<th>Shipped</th>
<th>Carrier</th>
<th>Tracking</th>
<th class="is-num">Items</th>
<th class="is-num">Weight</th>
<th class="is-num">Subtotal</th>
<th class="is-num">Shipping</th>
<th class="is-num">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>#18421</td>
<td>Ada Lovelace</td>
<td>2026-03-12</td>
<td>UPS</td>
<td>1Z999AA10123456784</td>
<td class="is-num">3</td>
<td class="is-num">4.2 lb</td>
<td class="is-num">$120.00</td>
<td class="is-num">$12.00</td>
<td class="is-num">$132.00</td>
</tr>
<tr>
<td>#18422</td>
<td>Grace Hopper</td>
<td>2026-03-12</td>
<td>FedEx</td>
<td>785436728944</td>
<td class="is-num">1</td>
<td class="is-num">0.8 lb</td>
<td class="is-num">$38.00</td>
<td class="is-num">$7.50</td>
<td class="is-num">$45.50</td>
</tr>
<tr>
<td>#18423</td>
<td>Katherine Johnson</td>
<td>2026-03-13</td>
<td>USPS</td>
<td>9400111899223344556677</td>
<td class="is-num">5</td>
<td class="is-num">6.9 lb</td>
<td class="is-num">$224.00</td>
<td class="is-num">$14.00</td>
<td class="is-num">$238.00</td>
</tr>
</tbody>
</table>
</div>
Bordered wrap
| Feature |
Status |
Ship week |
| Command palette |
In progress |
14 |
| Dark-mode audit |
Review |
15 |
| Webhook retries |
Planned |
17 |
<div class="table-wrap is-bordered">
<table class="table is-striped">
<thead>
<tr>
<th>Feature</th>
<th>Status</th>
<th class="is-num">Ship week</th>
</tr>
</thead>
<tbody>
<tr>
<td>Command palette</td>
<td>In progress</td>
<td class="is-num">14</td>
</tr>
<tr>
<td>Dark-mode audit</td>
<td>Review</td>
<td class="is-num">15</td>
</tr>
<tr>
<td>Webhook retries</td>
<td>Planned</td>
<td class="is-num">17</td>
</tr>
</tbody>
</table>
</div>
Bordered table wrap with bordered table
| Feature |
Status |
Ship week |
| Command palette |
In progress |
14 |
| Dark-mode audit |
Review |
15 |
| Webhook retries |
Planned |
17 |
<div class="table-wrap is-bordered">
<table class="table is-striped is-bordered">
<thead>
<tr>
<th>Feature</th>
<th>Status</th>
<th class="is-num">Ship week</th>
</tr>
</thead>
<tbody>
<tr>
<td>Command palette</td>
<td>In progress</td>
<td class="is-num">14</td>
</tr>
<tr>
<td>Dark-mode audit</td>
<td>Review</td>
<td class="is-num">15</td>
</tr>
<tr>
<td>Webhook retries</td>
<td>Planned</td>
<td class="is-num">17</td>
</tr>
</tbody>
</table>
</div>
Source comments
Table -- data table styling, plus a scroll wrapper.
Semantic wrapper (P3): plain <table> markup, no slot classes.
Variant classes stack on the root:
<div class="table-wrap">
<table class="table is-striped is-hoverable">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
Numeric columns: give the th/td the .is-num class for end
alignment and tabular figures.
Wide tables overflow on small screens; wrap them in .table-wrap
for horizontal scrolling. When both carry .is-bordered, the wrap
owns the outer frame and the table drops its own edge border so
the two don't double up.
Reference
Source: src/css/table.css
Applies to
.table
Classes
| Class | Kind | Description |
|---|
.is-striped | variant | Alternating row background on even rows |
.is-bordered | variant | Borders on all cells and the table edge |
.is-compact | variant | Denser padding and smaller font size |
.is-hoverable | variant | Highlight rows on hover |
Tokens
| Token | Default | Description |
|---|
--table-padding-block | var(--ui-pad-block-tight) | Block-axis cell padding for th and td |
--table-padding-inline | var(--ui-pad-inline-tight) | Inline-axis cell padding for th and td |
--table-border-color | var(--color-border) | Border color for cell dividers |
--table-header-bg | transparent | Background color for the header row |
--table-header-font-size | var(--ui-font-size-sm) | Font size for the header row |
--table-header-color | var(--color-text-muted) | Text color for header cells |
--table-stripe-bg | var(--color-fill-subtle) | Background color for striped and hovered rows |
Related: Table Wrap
Responsive scroll wrapper
Source: src/css/table.css
Applies to
.table-wrap
Classes
| Class | Kind | Description |
|---|
.is-bordered | variant | Show the border for the table wrap |
Tokens
| Token | Default | Description |
|---|
--table-wrap-border-color | var(--color-border) | Border color for the outer table-wrap when .is-bordered is used |