##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Basic Tables

Bootstrap's tables are opt-in for better flexibility. Add the base class `.table` to any `<table>` element, then enhance with modifier classes for various styling options. Tables can be styled independently, allowing nested tables to have their own distinct appearance.

## Basic Example

Using the `.table` class, you can create a simple table with default styling.

Basic Example
Loading...
Basic Example
Loading...

## Variants

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

### Table Variants

Using the `.table-primary` class, you can create table with primary colored. also have some more classes for table like : `.table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark`

Table Variants
Loading...
Table Variants
Loading...

### Rows Variants

Using the `.table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark` classes, you can create table with colored table rows.

Rows Variants
Loading...
Rows Variants
Loading...

### Cells Variants

Using the `.table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark` classes, you can create table with colored table cells.

Cells Variants
Loading...
Cells Variants
Loading...

## Accented Tables

### Striped Rows

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

Striped Rows
Loading...
Striped Rows
Loading...

### Striped Columns

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

Striped Columns
Loading...
Striped Columns
Loading...

### Hoverable Rows

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

Hoverable Rows
Loading...
Hoverable Rows
Loading...

### Active Tables

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

Active Tables
Loading...
Active Tables
Loading...

## Table Borders

### Bordered Tables

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

Bordered Tables
Loading...
Bordered Tables
Loading...

### Tables Without Borders

Use `.table-borderless` for a table without borders.

Bordered Tables
Loading...
Bordered Tables
Loading...

## Small Tables

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

Small Table
Loading...
Small Table
Loading...

## Table group dividers

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

Table group dividers
Loading...
Table group dividers
Loading...

## Vertical Alignment

Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the vertical align classes to re-align where needed.

Vertical Alignment
Loading...
Vertical Alignment
Loading...

## Nesting

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

Nesting
Loading...
Nesting
Loading...

## Anatomy

### Table Head

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

Table Head
Loading...
Table Head
Loading...

### Table Foot

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

Table Foot
Loading...
Table Foot
Loading...

### Table Captions

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.

You can also put the `<caption>` on the top of the table with `.caption-top`.

Table Captions
Loading...
Table Captions
Loading...

## Responsive Tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive[-sm|-md|-lg|-xl|-xxl]` .

### Always responsive

Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.

Always responsive
Loading...
Always responsive
Loading...

### Breakpoint Specific

Use `.table-responsive[-sm|-md|-lg|-xl|-xxl]` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

These tables may appear broken until their responsive styles apply at specific viewport widths.

Breakpoint Specific
Loading...
Breakpoint Specific
Loading...

## Examples

### Products Table

Products Table
Loading...
Products Table
Loading...

### Invoice Table

Invoice Table
Loading...
Invoice Table
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates