### 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 wrapping any table with `.table-responsive` `DIV` 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