Foundation for Sites6.5.1 changelog
Component List

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.

Watch this part in video

edit on codepen button 
<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.

Watch this part in video

edit on codepen button 
<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.

Watch this part in video

edit on codepen button 
<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.

Watch this part in video

edit on codepen button 
<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.

Watch this part in video

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.

edit on codepen button 
<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.

NameTypeDefault ValueDescription
$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.
$table-stack-breakpoint Breakpoint medium

Breakpoint at which stacked table switches from mobile to desktop view.

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.

ParameterTypeDefault ValueDescription
$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.

ParameterTypeDefault ValueDescription
$header Boolean $show-header-for-stacked

Show the first th of header when stacked.
Register Today

Get all the answers in our
Foundation Classes

Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.

See Upcoming Classes

Or if you prefer, contact the Foundation Team at training@zurb.com or (408) 341-0600 x635