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

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-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-foot-background`	Color	`smart-scale($table-background, $table-color-scale)`	Default color for footer background.
`$table-head-font-color`	Color	`$body-font-color`	Default font color for header.
`$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.

Tables

Basics

Hover State

Stacked Table

Scrolling Table

Sass Reference

Variables

Mixins

table

table-scroll

table-hover

table-stack

Let's build something amazing.

Foundation for Sites

Want more?

Talk to us

Stay Updated

Basics

Hover State

Stacked Table

Scrolling Table

Sass Reference

Variables

Mixins

table

table-scroll

table-hover

table-stack

Let's build something amazing.

Stay on top of what’s happening in responsive design.

Foundation for Sites

Want more?

Talk to us

Stay Updated