Table

Default

Use .table with native elements and scoped headers.

Name	Status
Alpha	Active
Beta	Pending

<table class="table">
	<thead>
		<tr>
			<th scope="col">Name</th>
			<th scope="col">Status</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">Alpha</th>
			<td>Active</td>
		</tr>
	</tbody>
</table>

Variants

Available modifiers:

• .table-striped adds alternating rows.
• .table-hover highlights the pointed row.
• .table-bordered adds cell borders; .table-borderless removes them.
• .table-sm reduces cell padding; .is-active highlights one row.

Variant	Value
Compact row	One
Active row	Two

<table class="table table-striped table-hover table-bordered table-sm">
	<!-- Native table structure -->
</table>

Row states

Use .is-warning or .is-invalid with visible status text.

Record	Status
Alpha	Incomplete
Beta	Invalid

<tr class="is-warning">
	<th scope="row">Alpha</th>
	<td>Incomplete</td>
</tr>
<tr class="is-invalid">
	<th scope="row">Beta</th>
	<td>Invalid</td>
</tr>

Responsive

Wrap wide tables in an accessibly named, focusable .table-responsive region.

<div class="table-responsive" role="region" tabindex="0" aria-label="Records">
	<table class="table">
		<!-- Native table structure -->
	</table>
</div>

CSS Variables

--table-color: var(--text-color);
--table-bg-color: var(--bg-surface);
--table-border-width: var(--border-width);
--table-border-color: var(--border-color);
--table-margin-bottom: var(--spacer-3);
--table-cell-padding-y: var(--spacer-2);
--table-cell-padding-x: var(--spacer-2);
--table-header-color: var(--text-color);
--table-header-bg-color: var(--bg-surface-hover);
--table-striped-bg-color: color-mix(in srgb, var(--table-bg-color) 98%, var(--table-color));
--table-striped-color: var(--table-color);
--table-hover-bg-color: var(--bg-highlight);
--table-hover-color: var(--table-color);
--table-active-bg-color: var(--bg-active);
--table-active-color: var(--table-color);
--table-row-state-accent-width: 0.25rem;
--table-row-state-accent-offset-x: var(--table-row-state-accent-width);
--table-row-invalid-bg-color: rgb(from var(--error) r g b / 0.08);
--table-row-invalid-hover-bg-color: rgb(from var(--error) r g b / 0.12);
--table-row-invalid-border-color: rgb(from var(--error) r g b / 0.35);
--table-row-invalid-accent-color: var(--error);
--table-row-warning-bg-color: rgb(from var(--warning) r g b / 0.1);
--table-row-warning-hover-bg-color: rgb(from var(--warning) r g b / 0.14);
--table-row-warning-border-color: rgb(from var(--warning) r g b / 0.35);
--table-row-warning-accent-color: var(--warning);