Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save ianthekirkland/d0bd3734e75bd58c12c01250f5956019 to your computer and use it in GitHub Desktop.

Select an option

Save ianthekirkland/d0bd3734e75bd58c12c01250f5956019 to your computer and use it in GitHub Desktop.
Foundation/Tables/Stacked (Flex)
<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>
$(document).foundation();
<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>
/**
* 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;
}
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment