#### Basic Tables

Using the most basic table Leanne Grahamup, here’s how `.table`-based tables look in Bootstrap. You can use any example of below table for your table and it can be use with any type of bootstrap tables.

Example 1: Table with outer spacing

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Ervin Howell | shanna@melissa.tv | @fat
3 | Clementine Bauch | nathan@yesenia.net | @twitter

Example 2: Minimal Table with no outer spacing.

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Ervin Howell | shanna@melissa.tv | @fat
3 | Clementine Bauch | nathan@yesenia.net | @twitter

#### Inverse table

You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`.

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Ervin Howell | shanna@melissa.tv | @fat
3 | Clementine Bauch | nathan@yesenia.net | @twitter

You can also invert the colors—with light text on dark backgrounds—with `.table-dark`.

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Ervin Howell | shanna@melissa.tv | @fat
3 | Clementine Bauch | nathan@yesenia.net | @twitter

#### Table head options

Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make `<thead>`s appear light or dark gray.

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Ervin Howell | shanna@melissa.tv | @fat
3 | Clementine Bauch | nathan@yesenia.net | @twitter

#### Table Hover Animation

Add `.table-hover-animation` to enable a hover stat with animation on table rows within a `<tbody>`.

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Ervin Howell | shanna@melissa.tv | @fat
3 | Clementine Bauch | nathan@yesenia.net | @twitter

#### Striped rows

Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`. This styling doesn't work in IE8 and below as `:nth-child` CSS selector isn't supported.

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Ervin Howell | shanna@melissa.tv | @fat
3 | Clementine Bauch | nathan@yesenia.net | @twitter

#### Striped rows with inverse dark

Use `.table-dark` with `.table-striped` to add zebra-striping to any inverse table row within the `<tbody>`. This styling doesn't work in IE8 and below as `:nth-child` CSS selector isn't supported.

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Ervin Howell | shanna@melissa.tv | @fat
3 | Clementine Bauch | nathan@yesenia.net | @twitter

#### Bordered table

Add `.table-bordered` for borders on all sides of the table and cells. For Inverse Dark Table, add `.table-dark` along with `.table-bordered`.

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Leanne Graham | sincere@april.biz | @TwBootstrap
3 | Ervin Howell | shanna@melissa.tv | @fat
4 | Clementine Bauch | nathan@yesenia.net | @twitter

#### Borderless Table

Add `.table-borderless` for a table without borders. It can also be used on dark tables.

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Leanne Graham | sincere@april.biz | @TwBootstrap
3 | Ervin Howell | shanna@melissa.tv | @fat
4 | Clementine Bauch | nathan@yesenia.net | @twitter

#### Hoverable rows

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

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Ervin Howell | shanna@melissa.tv | @fat
3 | Clementine Bauch | nathan@yesenia.net | @twitter

#### Contextual classes

Use contextual classes to color table rows or individual cells. Read full documnetation here.

ID | Name | Email | User ID
--- | --- | --- | ---
1 | Leanne Graham | sincere@april.biz | @mdo
2 | Ervin Howell | shanna@melissa.tv | @fat
3 | Clementine Bauch | Graham | @twitter
4 | Ervin | nathan@yesenia.net | @gmail
5 | Clementine Bauch | nathan@yesenia.net | @messanger
6 | Patricia Lebsack | julianne.OConner@kory.org | @twitter
7 | Chelsey Dietrich | lucio_Hettinger@annie.ca | @messanger
8 | Kurtis Weissnat | telly.Hoeger@billy.biz | @fat
9 | Glenna Reichert | chaim_McDermott@dana.io | @mdo

#### Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding `.table-responsive` class on `.table`. Or, pick a maximum breakpoint with which to have a responsive table up to by adding `.table-responsive{-sm|-md|-lg|-xl}`. Read full documnetation here.

#### Vertical clipping/truncation

Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

##### Always responsive

# | Heading 1 | Heading 2 | Heading 3 | Heading 4 | Heading 5 | Heading 6 | Heading 7 | Heading 8 | Heading 9 | Heading 10 | Heading 11 | Heading 12 | Heading 13
--- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | ---
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | 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 | Table cell | 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 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell