Panely

Basic Table

Using the most basic table markup, here’s how .table-based tables look.

# Head Head Head
1 Data Data Data
2 Data Data Data
3 Data Data Data

Contextual colors

Use contextual classes to color table rows or individual cells (e.q .table-primary).

# Head Head Head
1 Data Data Data
# Head Head Head
1 Data Data Data
# Head Head Head
1 Data Data Data
# Head Head Head
1 Data Data Data
# Head Head Head
1 Data Data Data
# Head Head Head
1 Data Data Data
# Head Head Head
1 Data Data Data
# Head Head Head
1 Data Data Data

Hoverable

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

# Head Head Head
1 Data Data Data
2 Data Data Data
3 Data Data Data

Border variants

Change the table border style by applying .table-{bordered|borderless}.

# Head Head Head
1 Data Data Data
2 Data Data Data
3 Data Data Data
# Head Head Head
1 Data Data Data
2 Data Data Data
3 Data Data Data

Striped

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

# Head Head Head
1 Data Data Data
2 Data Data Data
3 Data Data Data

Responsive table

Make your tables always responsive, use .table-responsive for horizontally scrolling tables.

Use .table-responsive-{sm|md|lg|xl} as needed to create responsive tables up to a particular breakpoint.

# Head Head Head Head Head Head Head Head Head Head Head Head
1 Data Data Data Data Data Data Data Data Data Data Data Data
2 Data Data Data Data Data Data Data Data Data Data Data Data
3 Data Data Data Data Data Data Data Data Data Data Data Data

Small table

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

May 14, 2020

Upcoming events

12:00

Donec laoreet fringilla justo a pellentesque

13:20

Nunc quis massa nec enim

14:00

Praesent sit amet

Settings

Performance

CPU Load
60%
CPU Temparature
42°
RAM Usage
6,532 MB

Customer care

Reports

Projects

Dashboard

Dashboard 1

Dashboard 2

Dashboard 3

Dashboard 4

Dashboard 5

Dashboard 6

Dashboard 7

Dashboard 8

Email

Criptocurrency

Chatting

Navigation