Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles.

@for (product of products; track $index) { }

Product Name	Category	Price	Stock	Rating	Status	Actions
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★	{{ product.status }}

Exclusive

Add the base classes .table and .table-custom to any <table> element to apply custom styling, including spacing for the first and last table cells.

@for (product of products; track $index) { }

Product Name	Category	Price	Stock	Rating	Status	Actions
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★	{{ product.status }}	View Edit Delete

View Docs

Use contextual classes to color tables, table rows or individual cells.

Product Name	Category	Price	Stock	Rating	Status	Actions
Bluetooth Speaker	Audio	$49.00	200	4.6 ★	Active	View Edit Delete
Leather Wallet	Accessories	$29.99	150	4.3 ★	Active	View Edit Delete
Fitness Tracker	Wearables	$89.00	60	4.1 ★	Limited Stock	View Edit Delete
4K Monitor	Electronics	$349.00	30	4.8 ★	Active	View Edit Delete
Standing Desk	Furniture	$499.00	10	4.4 ★	New	View Edit Delete

View Docs

Use .table-striped to add zebra-striping to any table row within the <tbody>.

@for (product of products.slice(0, 3); track $index) { }

Product Name	Category	Price	Stock	Rating	Status	Actions
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★	{{ product.status }}	View Edit Delete

View Docs

Use .table-striped-columns to add zebra-striping to any table column.

@for (product of products.slice(0, 3); track $index) { }

Product Name	Category	Price	Stock	Rating	Status	Actions
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★	{{ product.status }}	View Edit Delete

View Docs

Add .table-hover to enable a hover state on table rows within a <tbody>

@for (product of products.slice(0, 3); track $index) { }

Product Name	Category	Price	Stock	Rating	Status	Actions
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★	{{ product.status }}	View Edit Delete

View Docs

Highlight a table row or cell by adding a .table-active class.

@for (product of products.slice(0, 3); track $index; let i = $index) { }

Product Name	Category	Price	Stock	Rating	Status	Actions
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★	{{ product.status }}	View Edit Delete

View Docs

Add .table-bordered for borders on all sides of the table and cells.

@for (product of products.slice(0, 3); track $index; ) { }

Product Name	Category	Price	Stock	Rating	Status	Actions
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★	{{ product.status }}	View Edit Delete

View Docs

Add .table-borderless for a table without borders.

@for (product of products.slice(0, 3); track $index; ) { }

Product Name	Category	Price	Stock	Rating	Status	Actions
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★	{{ product.status }}	View Edit Delete

View Docs

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

@for (product of products.slice(0, 3); track $index; ) { }

Product Name	Category	Price	Stock	Rating
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★

View Docs

Add a thicker border, darker between table groups—<thead>, <tbody>, and <tfoot>—with .table-group-divider. Customize the color by changing the border-top-color (which we don’t currently provide a utility class for at this time).

@for (product of products.slice(0, 3); track $index; ) { }

Product Name	Category	Price	Stock	Rating	Status	Actions
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★	{{ product.status }}	View Edit Delete

View Docs

Border styles, active styles, and table variants are not inherited by nested tables.

@for (product of products.slice(0, 3); track $index; ) { @if (product.children) { } }

Product Name

Category

Price

Stock

Rating

Status

Actions

${{ product.price.toFixed(2) }}

{{ product.rating.toFixed(1) }} ★

@for (item of product.children; track $index; ) { }

Variant	Color	SKU	Stock
{{ item.variant }}	{{ item.color }}	{{ item.sku }}	{{ item.stock }}

View Docs

Similar to tables and dark tables, use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.

@for (product of products.slice(0, 3); track $index; ) { }

Product Name	Category	Price	Stock	Rating	Status	Actions
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★	{{ product.status }}	View Edit Delete

View Docs

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

@for (product of products.slice(0, 3); track $index; ) { }

List of Ecommerce Products
Product Name	Category	Price	Stock	Rating	Status	Actions
{{ product.name }}	{{ product.category }}	${{ product.price.toFixed(2) }}	{{ product.stock }}	{{ product.rating.toFixed(1) }} ★	{{ product.status }}	View Edit Delete