#### Tables - Basic

Statistics Invoices Schedule

###### Basic tables

Tables with default `Bootstrap` styling

##### Basic table

Example of a `basic` table. 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 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Striped rows

Example of a table with `striped` rows. Use `.table-striped` added to the base `.table` class to add zebra-striping to any table odd row within the `<tbody>`. This styling doesn't work in IE8 and lower as `:nth-child` CSS selector isn't supported in these browser versions. Striped table can be combined with other table styles.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Bordered table

Example of a table with fully `bordered` cells. Add `.table-bordered` to the base `.table` class for borders on all sides of the table and cells. This is a default Bootstrap option for the table, for more advanced border options check Table borders page. Bordered table can be combined with other table styles.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Bordered striped

Example of a `bordered` table with `stiped` rows. Add `.table-bordered` and `.table-striped` classes to the base `.table` class for borders and row striping. This method works with all table border options.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Hover rows

Example of a table with `hover` rows state. Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Scrollable table

Example of a `scrollable` table. To use a fixed height with scrolling, wrap any table in a div with `.table-scrollable` class. Max height of the table container will be `22.5rem` and table will get a vertical scrollbar if its height exceeds this value.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Stanley | Martins | @Stan
5 | Winnie | the Pooh | @Winnie
6 | Garry | Smith | @Garry
7 | Ian | Berg | @Ian
8 | John | Ryan | @John
9 | Frank | Giggs | @Frank
10 | Jack | Gram | @Jack
11 | Patrick | Lawrence | @Patrick
12 | Lucy | Gulf | @Lucy
13 | Dave | Armstrong | @Dave
14 | Sean | Lewis | @Sean

###### Card body tables

Tables placed inside `card body`.

##### Card body table

Example of a table placed inside `card body`. Such tables always have additional whitespace taken from `.card-body` element padding.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Framed table

Example of `framed` table inside card body. Tables that placed inside card body don't have border around them by default, `.table-framed` class adds border around the table.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Framed bordered

Example of `bordered framed` table inside card body. By default bordered table also doesn't have a border, to use border around the bordered table add `.table-framed` to the `<table>`.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank