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

<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

<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

<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

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

<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	`color.adjust($table-background, $lightness: -$table-hover-scale)`	Default color of standard rows on hover.
`$table-row-stripe-hover`	List	`color.adjust($table-background, $lightness: -($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 * 0.5)`	Default color for header background.
`$table-head-row-hover`	List	`color.adjust($table-head-background, $lightness: -$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	`color.adjust($table-foot-background, $lightness: -$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, $nest);

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.
`$nest`	Boolean	`false`	Needed if you only want to apply this to a specific table.

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.