biofriction-wp-theme/node_modules/foundation-sites/docs/pages/table.md

title	description	video	sass
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.	-Omv7c3Qg4s	scss/components/_table.scss

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>

---

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