Foundation/Tables/Unstriped (Flex)

foundation-tables-unstriped-flex.markdown

Foundation/Tables/Unstriped (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 - Unstriped</h2>
      <p>By default, table rows are striped. There's an <code>.unstriped</code> class to remove the stripes. If you change <code>$table-is-striped</code> to <code>false</code> to remove stripes from all tables, use the <code>.striped</code> class to add stripes.</p>
      <br>
      <table class="unstriped">
        <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 Here</td>
            <td>This is longer content. Donec id elit non mi porta gravida.</td>
            <td>Content Here</td>
            <td>Content Here</td>
          </tr>
          <tr>
            <td>More Content</td>
            <td>Additional Content Goes Here Donec id elit.</td>
            <td>More Content</td>
            <td>More Content</td>
          </tr>
          <tr>
            <td>Even More</td>
            <td>Longer Content Goes Here Donec porta gravida at eget metus.</td>
            <td>Even More</td>
            <td>Even More</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" />