{% set title = 'Table' %} {% set filename = 'table.html' %} {% extends 'src/layouts/master.html' %} {% block content %}

### Table

Who does not love tables?

#### Table with outer spacing

Using the most basic table up, 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.

NAME | RATE | SKILL
--- | --- | ---
Michael Right | $15/hr | UI/UX
Morgan Vanblum | $13/hr | Graphic concepts
Tiffani Blogz | $15/hr | Animation
Ashley Boul | $15/hr | Animation
Mikkey Mice | $15/hr | Animation

#### Table without outer spacing

Using the most basic table up, 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.

NAME | RATE | SKILL
--- | --- | ---
Michael Right | $15/hr | UI/UX
Morgan Vanblum | $13/hr | Graphic concepts
Tiffani Blogz | $15/hr | Animation
Ashley Boul | $15/hr | Animation
Mikkey Mice | $15/hr | Animation

#### Inverse table

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

NAME | RATE | SKILL | TYPE | LOCATION | ACTION
--- | --- | --- | --- | --- | ---
Michael Right | $15/hr | UI/UX | Remote | Austin,Taxes |
Morgan Vanblum | $13/hr | Graphic concepts | Remote | Shangai,China |
Tiffani Blogz | $15/hr | Animation | Remote | Austin,Texas |
Ashley Boul | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |

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

NAME | RATE | SKILL | TYPE | LOCATION | ACTION
--- | --- | --- | --- | --- | ---
Michael Right | $15/hr | UI/UX | Remote | Austin,Taxes |
Morgan Vanblum | $13/hr | Graphic concepts | Remote | Shangai,China |
Tiffani Blogz | $15/hr | Animation | Remote | Austin,Texas |
Ashley Boul | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |

#### 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.

NAME | RATE | SKILL | TYPE | LOCATION | ACTION
--- | --- | --- | --- | --- | ---
Michael Right | $15/hr | UI/UX | Remote | Austin,Taxes |
Morgan Vanblum | $13/hr | Graphic concepts | Remote | Shangai,China |
Tiffani Blogz | $15/hr | Animation | Remote | Austin,Texas |
Ashley Boul | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |

#### 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.

NAME | RATE | SKILL | TYPE | LOCATION | ACTION
--- | --- | --- | --- | --- | ---
Michael Right | $15/hr | UI/UX | Remote | Austin,Taxes |
Morgan Vanblum | $13/hr | Graphic concepts | Remote | Shangai,China |
Tiffani Blogz | $15/hr | Animation | Remote | Austin,Texas |
Ashley Boul | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |

#### Striped 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.

NAME | RATE | SKILL | TYPE | LOCATION | ACTION
--- | --- | --- | --- | --- | ---
Michael Right | $15/hr | UI/UX | Remote | Austin,Taxes |
Morgan Vanblum | $13/hr | Graphic concepts | Remote | Shangai,China |
Tiffani Blogz | $15/hr | Animation | Remote | Austin,Texas |
Ashley Boul | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |

#### 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`.

NAME | RATE | SKILL | TYPE | LOCATION | ACTION
--- | --- | --- | --- | --- | ---
Michael Right | $15/hr | UI/UX | Remote | Austin,Taxes |
Morgan Vanblum | $13/hr | Graphic concepts | Remote | Shangai,China |
Tiffani Blogz | $15/hr | Animation | Remote | Austin,Texas |
Ashley Boul | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |

#### Borderless Table

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

NAME | RATE | SKILL | TYPE | LOCATION | ACTION
--- | --- | --- | --- | --- | ---
Michael Right | $15/hr | UI/UX | Remote | Austin,Taxes |
Morgan Vanblum | $13/hr | Graphic concepts | Remote | Shangai,China |
Tiffani Blogz | $15/hr | Animation | Remote | Austin,Texas |
Ashley Boul | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |

#### Hoverable rows

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

NAME | RATE | SKILL | TYPE | LOCATION | ACTION
--- | --- | --- | --- | --- | ---
Michael Right | $15/hr | UI/UX | Remote | Austin,Taxes |
Morgan Vanblum | $13/hr | Graphic concepts | Remote | Shangai,China |
Tiffani Blogz | $15/hr | Animation | Remote | Austin,Texas |
Ashley Boul | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |

#### Contextual classes

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

NAME | RATE | SKILL | TYPE | LOCATION | ACTION
--- | --- | --- | --- | --- | ---
Michael Right | $15/hr | UI/UX | Remote | Austin,Taxes |
Morgan Vanblum | $13/hr | Graphic concepts | Remote | Shangai,China |
Tiffani Blogz | $15/hr | Animation | Remote | Austin,Texas |
Ashley Boul | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |
Mikkey Mice | $15/hr | Animation | Remote | Austin,Texas |

#### Always responsive

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a div with the class `.table-responsive` around the 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 documentation 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.

# | 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
--- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Michael Right | 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
Michael Right | 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
Michael Right | 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

{% endblock %}