Tables

Basic Tables

Using the most basic table markup, here’s how tables look in Metronic:
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter
You can also invert the colors—with light text on dark backgrounds—with .table-inverse .
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter

Table Head Options

Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray.
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter

Small Table

Add .table-sm to make tables more compact by cutting cell padding in half.
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter

Striped Rows

# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter

Bordered Table

# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter

Hoverable Table

# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter

Table Head States

# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter

Table Bordered States

# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter

Table Row States

# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter
4 Nick looper @king
5 Joan thestar @joan
6 Sean coder @coder

Responsive tables

Create responsive tables by adding .table-responsive to any .table to make them scroll horizontally on small devices (under 768px)
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
Megan wrote
Hi Bob. What time will be the meeting ?
Hi Megan. It's at 2.30PM
Megan wrote
Will the development team be joining ?
Yes sure. I invited them as well
2:30PM
Megan wrote
Noted. For the Coca-Cola Mobile App project as well ?
Yes, sure.
Please also prepare the quotation for the Loop CRM project as well.
3:15PM
M
Megan wrote
Noted. I will prepare it.
Thanks Megan. I will see you later.
Megan wrote
Sure. See you in the meeting soon.
General Settings
Email Notifications
Site Tracking
SMS Alerts
Backup Storage
Audit Logs
System Settings
System Logs
Error Reporting
Applications Logs
Backup Servers
Audit Logs
System Logs
12 new users registered important Just now
System shutdown 11 mins
New invoice received 20 mins
Database overloaded 89% resolved 1 hr
System error 2 hrs
Production server down pending 3 hrs
Production server up 5 hrs
Applications Logs
New order received urgent 7 hrs
12 new users registered Just now
System shutdown 11 mins
New invoices received 20 mins
Database overloaded 89% 1 hr
System error pending 2 hrs
Production server down 3 hrs
Server Logs
Production server up 5 hrs
New order received 7 hrs
12 new users registered Just now
System shutdown 11 mins
New invoice received 20 mins
Database overloaded 89% 1 hr
System error 2 hrs
Production server down 3 hrs
Production server up 5 hrs
New order received 1117 hrs