Table Basic

From now on you will start your activities.
Basic example
RefreshManage WidgetsSettings

For basic styling—light padding and only horizontal dividers—add the base class .tableto 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
RefreshManage WidgetsSettings

Use .table-stripedto 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
RefreshManage WidgetsSettings

Add .table-borderlessfor a table without borders.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Small table
RefreshManage WidgetsSettings

Add .table-smto 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
RefreshManage WidgetsSettings

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
RefreshManage WidgetsSettings

Similar to tables and dark tables, use the modifier classes .thead-lightor .thead-darkto 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
RefreshManage WidgetsSettings

Add .table-borderedfor 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
RefreshManage WidgetsSettings

Add .table-hoverto 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
RefreshManage WidgetsSettings

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