Table Basic

From now on you will start your activities.
Basic example
Refresh Manage Widgets Settings

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped rows
Refresh Manage Widgets Settings

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Borderless table
Refresh Manage Widgets Settings

Add .table-borderless for a table without borders.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Small table
Refresh Manage Widgets Settings

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Captions
Refresh Manage Widgets Settings

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.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table head options
Refresh Manage Widgets Settings

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Bordered table
Refresh Manage Widgets Settings

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Hoverable rows
Refresh Manage Widgets Settings

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Contextual classes
Refresh Manage Widgets Settings

Use contextual classes to color table rows or individual cells.

Class Heading Heading
Active Cell Cell
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell

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

Image Name Phone Street Address % Share City Action
... ... ... ...
Naeem Khan 123 456 7890 294-318 Duis Ave
Noakhali
... ...
Tuhin Sarkar 123 456 7890 680-1097 Mi Rd.
Lavoir
... ... ...
Tanjil Ahmed 456 789 1230 Ap #289-8161 In Avenue
Dhaka
... ... ...
Sourav 789 123 4560 226-4861 Augue. St.
Rongpur
... ... ... ...
Jahangir Alam (01662) 59083 3219 Elit Avenue
Chittagong
... ... ...
Brielle Williamson 123 456 7890 Dhaka-1229, Bangladesh
Barisal