##### Loading...

Disable Preloader

## Tables

#### Basic example

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 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

    <table class="table">
      ...
    </table>

#### Striped rows

Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

    <table class="table table-striped">
      ...
    </table>

#### Bordered table

Add `.table-bordered` for borders on all sides of the table and cells.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

    <table class="table table-bordered">
      ...
    </table>

#### Hover rows

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

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

    <table class="table table-hover">
      ...
    </table>

#### Condensed table

Add `.table-condensed` to make tables more compact by cutting cell padding in half.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

    <table class="table table-condensed">
      ...
    </table>

#### Contextual classes

Use contextual classes to color table rows or individual cells.

Class | Description
--- | ---
`.active` | Applies the hover color to a particular row or cell
`.success` | Indicates a successful or positive action
`.info` | Indicates a neutral informative change or action
`.warning` | Indicates a warning that might need attention
`.danger` | Indicates a dangerous or potentially negative action

# | Column heading | Column heading | Column heading
--- | --- | --- | ---
1 | Column content | Column content | Column content
2 | Column content | Column content | Column content
3 | Column content | Column content | Column content
4 | Column content | Column content | Column content
5 | Column content | Column content | Column content
6 | Column content | Column content | Column content
7 | Column content | Column content | Column content
8 | Column content | Column content | Column content
9 | Column content | Column content | Column content

    <!-- On rows -->
    <tr class="active">...</tr>
    <tr class="success">...</tr>
    <tr class="warning">...</tr>
    <tr class="danger">...</tr>
    <tr class="info">...</tr>

    <!-- On cells (`td` or `th`) -->
    <tr>
      <td class="active">...</td>
      <td class="success">...</td>
      <td class="warning">...</td>
      <td class="danger">...</td>
      <td class="info">...</td>
    </tr>

#### Responsive tables

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

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

    <div class="table-responsive">
      <table class="table">
        ...
      </table>
    </div>