Foundation
Jump to Nav

# Tables

Okay, they're not the sexiest things ever, but tables get the job done (for tabular data, of course). They have responsive modifiers to help solve some of your layout issues based on your tables needs.

## Basics

No bells or whistles here, just a straight up table for all of your basic table needs.

    <table>
      <thead>
        <tr>
          <th width="200">Table Header</th>
          <th>Table Header</th>
          <th width="150">Table Header</th>
          <th width="150">Table Header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Content Goes Here</td>
          <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
          <td>Content Goes Here</td>
          <td>Content Goes Here</td>
        </tr>
        <tr>
          <td>Content Goes Here</td>
          <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
          <td>Content Goes Here</td>
          <td>Content Goes Here</td>
        </tr>
        <tr>
          <td>Content Goes Here</td>
          <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
          <td>Content Goes Here</td>
          <td>Content Goes Here</td>
        </tr>
      </tbody>
    </table>

Table Header | Table Header | Table Header | Table Header
--- | --- | --- | ---
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here

## Hover State

Need to spiff up the table just a tad? Just add the class `.hover` to lightly darken the table rows on hover.

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

Table Header | Table Header | Table Header | Table Header
--- | --- | --- | ---
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here

## Stripes

By default, table rows are striped. There's an `.unstriped` class to remove the stripes. If you change `$table-is-striped` to `false` to remove stripes from all tables, use the `.striped` class to add stripes.

    <table class="unstriped">
    </table>

Table Header | Table Header | Table Header | Table Header
--- | --- | --- | ---
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here

## Stacked Table

To stack a table on small screens, add the class `.stack`.

    <table class="stack">
    </table>

Cookies | Taste | Calories | Overall
--- | --- | --- | ---
Chocolate Chip | Tastey | 120cal | 7.5/10
Snickerdoodle | Delicious | 95cal | 8/10
Oatmeal Raisin | Superb | 10cal | 11/10

## Scrolling Table

Got a lot of tubular tabular data? Add a wrapper element with the class `.table-scroll` around your table to enable horizontal scrolling.

The wrapping element was added in Foundation 6.2—prior to that, you just added the class `.scroll` to the table itself. However, this method doesn't work great with Internet Explorer 9. If you don't need IE9 support, you can just add `.scroll` to your table, and the wrapping element isn't necessary.

    <div class="table-scroll">
      <table></table>
    </div>

This is the description! | One | Two | Three | Four | Five | Six | Seven | Eight | Nine | Ten | Eleven | Twelve
--- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | ---
These are all the words that people use to describe Foundation 6! | Cool | Swag | Chill | Killer | Rad | Baller | OMG | Sweet | Awesome | Beast | Dope | Tubular
These are some words that people use to describe other web frameworks. | Whatevs | Ugh. | LOL | K | Aight | Eh. | Grrr... | Meh. | TTYL | Bleh. | Really? | Why?
Here are some great super heros. | Batman | Superman | Spiderman | Wonder Woman | Hulk | Nicolas Cage | Antman | Aquaman | Captain America | Wolverine | Thor | Iron Man
Here's a footer, just in case |  |  |  |  |  |  |  |  |  |  |  |

## Sass Reference

### Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$table-background` | Color | `$white` | Default color for table background.
`$table-color-scale` | Number | `5%` | Default scale for darkening the striped table rows and the table border.
`$table-border` | List | `1px solid smart-scale($table-background, $table-color-scale)` | Default style for table border.
`$table-padding` | Number | `rem-calc(8 10 10)` | Default padding for table.
`$table-hover-scale` | Number | `2%` | Default scale for darkening the table rows on hover.
`$table-row-hover` | List | `darken($table-background, $table-hover-scale)` | Default color of standard rows on hover.
`$table-row-stripe-hover` | List | `darken($table-background, $table-color-scale + $table-hover-scale)` | Default color of striped rows on hover.
`$table-is-striped` | Boolean | `true` | If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.
`$table-striped-background` | Color | `smart-scale($table-background, $table-color-scale)` | Default background color for striped rows.
`$table-stripe` | Keyword | `even` | Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.
`$table-head-background` | Color | `smart-scale($table-background, $table-color-scale / 2)` | Default color for header background.
`$table-head-row-hover` | List | `darken($table-head-background, $table-hover-scale)` | Default color of header rows on hover.
`$table-foot-background` | Color | `smart-scale($table-background, $table-color-scale)` | Default color for footer background.
`$table-foot-row-hover` | List | `darken($table-foot-background, $table-hover-scale)` | Default color of footer rows on hover.
`$table-head-font-color` | Color | `$body-font-color` | Default font color for header.
`$table-foot-font-color` | Color | `$body-font-color` | Default font color for footer.
`$show-header-for-stacked` | Boolean | `false` | Default value for showing the header when using stacked tables.

### Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

#### table

    @include table($stripe);

Adds the general styles for tables.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$stripe` | Keyword | `$table-stripe` | Uses keywords even, odd, or none to darken rows of the table. The default value is even.

#### table-scroll

    @include table-scroll;

Adds the ability to horizontally scroll the table when the content overflows horizontally.

#### table-hover

    @include table-hover;

Slightly darkens the table rows on hover.

#### table-stack

    @include table-stack($header);

Adds styles for a stacked table. Useful for small-screen layouts.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$header` | Boolean | `$show-header-for-stacked` | Show the first th of header when stacked.