Foundation/Tables/Stacked (Flex)

foundation-tables-stacked-flex.markdown

Foundation/Tables/Stacked (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 - Stacked</h2>
      <p>To stack a table on small screens, add the class <code>.stack</code>.</p>
      <table class="stack">
        <thead>
          <tr>
            <th width="300">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>
    </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" />