Foundation/Tables/Scrolling (Flex)

foundation-tables-scrolling-flex.markdown

Foundation/Tables/Scrolling (Flex)

Example of Foundation's table styles.

A Pen by Ian Kirkland on CodePen.

License.

index.html

<section class="container">

  <div class="row">
    <div class="columns">
      <h2>Tables - Scrolling</h2>
      <p>Got a lot of tubular tabular data? Add a wrapper element with the class <code>.table-scroll</code> around your table to enable horizontal scrolling.</p>
      <div class="primary callout">
        <p>The wrapping element was added in Foundation 6.2—prior to that, you just added the class <code>.scroll</code> to the table itself. However, this method doesn't work great with Internet Explorer 9. <strong>If you don't need IE9 support, you can just add <code>.scroll</code> to your table, and the wrapping element isn't necessary.</strong></p>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="columns">
      <div class="table-scroll">
        <table>
          <thead>
            <tr>
              <th>This is the description!</th>
              <th>One</th>
              <th>Two</th>
              <th>Three</th>
              <th>Four</th>
              <th>Five</th>
              <th>Six</th>
              <th>Seven</th>
              <th>Eight</th>
              <th>Nine</th>
              <th>Ten</th>
              <th>Eleven</th>
              <th>Twelve</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="display:block; width:400px;">These are all the words that people use to describe Foundation 6!</td>
              <td>Cool</td>
              <td>Swag</td>
              <td>Chill</td>
              <td>Killer</td>
              <td>Rad</td>
              <td>Baller</td>
              <td>OMG</td>
              <td>Sweet</td>
              <td>Awesome</td>
              <td>Beast</td>
              <td>Dope</td>
              <td>Tubular</td>
            </tr>
            <tr>
              <td>These are some words that people use to describe other web frameworks.</td>
              <td>Whatevs</td>
              <td>Ugh.</td>
              <td>LOL</td>
              <td>K</td>
              <td>Aight</td>
              <td>Eh.</td>
              <td>Grrr...</td>
              <td>Meh.</td>
              <td>TTYL</td>
              <td>Bleh.</td>
              <td>Really?</td>
              <td>Why?</td>
            </tr>
            <tr>
              <td>Here are some great super heros.</td>
              <td>Batman</td>
              <td>Superman</td>
              <td>Spiderman</td>
              <td>Wonder Woman</td>
              <td>Hulk</td>
              <td>Nicolas Cage</td>
              <td>Antman</td>
              <td>Aquaman</td>
              <td>Captain America</td>
              <td>Wolverine</td>
              <td>Thor</td>
              <td>Iron Man</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td>Here's a footer, just in case</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

</section>

script.js

$(document).foundation();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://codepen.io/ZURBFoundation/pen/LyejWr"></script>

style.css

/** 
 * Demo Styles - Table
 */
.demo-toggle-title {
  margin-top: 0.5rem;
}

.top-bar {
  width: 100%;
}

.menu .active {
  font-weight: bold;
}

/** 
 * Demo Styles 
 */
* { 
  color: #444444; 
}

body {
  padding: 2rem 1rem;
}

.container {
  width: 80%;
  margin: auto;
  margin-top: 2em;
}

.row {
  margin-bottom: 2em;
}

.row.small-up-12 {
  margin-bottom: 0;
}

.column {
  margin-bottom: .5em;
}

/* Hides Foundation Docs Callout */
[href*="https://foundation.zurb.com/sites.html"] {
	visibility: hidden !important;
	padding: 0px !important;
	margin: 0px !important;
	width: 0px !important;
	height: 0px !important;
	display: none !important;
}

styles

<link href="http://codepen.io/ZURBFoundation/pen/jmYLwq" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" />