1449 lines
92 KiB
HTML
Executable File
1449 lines
92 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" type="text/css" media="all" href="assets/css/cascade/production/build-full.min.css" />
|
|
<link rel="stylesheet" type="text/css" media="all" href="assets/css/site.css" />
|
|
<!--[if lt IE 8]><link rel="stylesheet" href="assets/css/cascade/production/icons-ie7.min.css"><![endif]-->
|
|
<!--[if lt IE 9]><script src="assets/js/shim/iehtmlshiv.js"></script><![endif]-->
|
|
<title>Cascade Framework</title>
|
|
<meta name="description" content="Professional Frontend framework that makes building websites easier than ever.">
|
|
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style type="text/css">
|
|
|
|
</style>
|
|
</head>
|
|
<body class="narrow">
|
|
<div class="site-center">
|
|
<div class="site-body">
|
|
<div class="site-header">
|
|
<div class="tags sitemenutags">
|
|
<div class="cell">
|
|
<ul class="nav blocks">
|
|
<li><a href="https://github.com/jslegers/cascadeframework/archive/master.zip">Download v1.6</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col width-fill sitemenu">
|
|
<div class="col width-fit mobile-width-fit">
|
|
<div class="cell">
|
|
<a href="index.html" class="logo"></a>
|
|
</div>
|
|
</div>
|
|
<div class="col width-fill mobile-width-fill">
|
|
<div class="cell">
|
|
<ul class="nav">
|
|
<li><a href="grid.html">Grid</a></li>
|
|
<li><a href="typography.html">Typography</a></li>
|
|
<li><a href="icons.html">Icons</a></li>
|
|
<li class="active"><a href="components.html">Components</a></li>
|
|
<li><a href="templates.html">Templates</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sitemenu-responsive col collapsible collapsed">
|
|
<div class="col collapse-trigger">
|
|
<div class="cell">
|
|
<ul class="nav ">
|
|
<li><a href="#"><span class="icon icon-32 icon-align-justify"></span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="left collapse-section">
|
|
<div class="cell">
|
|
<ul class="nav">
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="grid.html">Grid</a></li>
|
|
<li><a href="typography.html">Typography</a></li>
|
|
<li><a href="icons.html">Icons</a></li>
|
|
<li><a href="components.html">Components</a></li>
|
|
<li><a href="templates.html">Templates</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<div class="page-header">
|
|
<h1>Components <small>documentation</small></h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col width-1of4">
|
|
<div class="cell menu">
|
|
<span class="tiny">Component types</span>
|
|
<ul class="left nav links">
|
|
<li><a href="components.html">Panels</a></li>
|
|
<li><a href="components-tabblocks.html">Tab blocks</a></li>
|
|
<li class="active"><a href="components-tables.html">Tables</a></li>
|
|
<li><a href="components-navigation.html">Navigation</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col width-fill">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Basic table</h2>
|
|
<p>By default, a table has no styling.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table>
|
|
<tr>
|
|
<th class="width-1of4">Comedy</th>
|
|
<th class="width-1of4">Adventure</th>
|
|
<th class="width-1of4">Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr>
|
|
<th class="width-1of5">Company</th>
|
|
<td class="width-1of5">Q1</td>
|
|
<td class="width-1of5">Q2</td>
|
|
<td class="width-1of5">Q3</td>
|
|
<td>Q4</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Microsoft</th>
|
|
<td>20.3</td>
|
|
<td>30.5</td>
|
|
<td>23.5</td>
|
|
<td>40.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Google</th>
|
|
<td>50.2</td>
|
|
<td>40.63</td>
|
|
<td>45.23</td>
|
|
<td>39.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Apple</th>
|
|
<td>25.4</td>
|
|
<td>30.2</td>
|
|
<td>33.3</td>
|
|
<td>36.7</td>
|
|
</tr>
|
|
<tr>
|
|
<th>IBM</th>
|
|
<td>20.4</td>
|
|
<td>15.6</td>
|
|
<td>22.3</td>
|
|
<td>29.3</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Uppercase header</h2>
|
|
<p>Using the "uppercase-header" class, your header becomes uppercase.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="uppercase-header">
|
|
<tr>
|
|
<th class="width-1of4">Comedy</th>
|
|
<th class="width-1of4">Adventure</th>
|
|
<th class="width-1of4">Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="uppercase-header">
|
|
<tr>
|
|
<th class="width-1of5">Company</th>
|
|
<td class="width-1of5">Q1</td>
|
|
<td class="width-1of5">Q2</td>
|
|
<td class="width-1of5">Q3</td>
|
|
<td>Q4</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Microsoft</th>
|
|
<td>20.3</td>
|
|
<td>30.5</td>
|
|
<td>23.5</td>
|
|
<td>40.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Google</th>
|
|
<td>50.2</td>
|
|
<td>40.63</td>
|
|
<td>45.23</td>
|
|
<td>39.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Apple</th>
|
|
<td>25.4</td>
|
|
<td>30.2</td>
|
|
<td>33.3</td>
|
|
<td>36.7</td>
|
|
</tr>
|
|
<tr>
|
|
<th>IBM</th>
|
|
<td>20.4</td>
|
|
<td>15.6</td>
|
|
<td>22.3</td>
|
|
<td>29.3</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Box header</h2>
|
|
<p>Using the "box-header" class, you can add a box type header to your table.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="box-header">
|
|
<tr>
|
|
<th class="width-1of4">Comedy</th>
|
|
<th class="width-1of4">Adventure</th>
|
|
<th class="width-1of4">Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="box-header">
|
|
<tr>
|
|
<th class="width-1of5">Company</th>
|
|
<td class="width-1of5">Q1</td>
|
|
<td class="width-1of5">Q2</td>
|
|
<td class="width-1of5">Q3</td>
|
|
<td>Q4</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Microsoft</th>
|
|
<td>20.3</td>
|
|
<td>30.5</td>
|
|
<td>23.5</td>
|
|
<td>40.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Google</th>
|
|
<td>50.2</td>
|
|
<td>40.63</td>
|
|
<td>45.23</td>
|
|
<td>39.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Apple</th>
|
|
<td>25.4</td>
|
|
<td>30.2</td>
|
|
<td>33.3</td>
|
|
<td>36.7</td>
|
|
</tr>
|
|
<tr>
|
|
<th>IBM</th>
|
|
<td>20.4</td>
|
|
<td>15.6</td>
|
|
<td>22.3</td>
|
|
<td>29.3</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Outline header</h2>
|
|
<p>Using the "outline-header" class, a header gets a larger font and is underlined.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="outline-header">
|
|
<thead>
|
|
<tr>
|
|
<th class="width-1of4">Comedy</th>
|
|
<th class="width-1of4">Adventure</th>
|
|
<th class="width-1of4">Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="outline-header">
|
|
<thead>
|
|
<tr>
|
|
<th class="width-1of5">Company</th>
|
|
<td class="width-1of5">Q1</td>
|
|
<td class="width-1of5">Q2</td>
|
|
<td class="width-1of5">Q3</td>
|
|
<td>Q4</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>Microsoft</th>
|
|
<td>20.3</td>
|
|
<td>30.5</td>
|
|
<td>23.5</td>
|
|
<td>40.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Google</th>
|
|
<td>50.2</td>
|
|
<td>40.63</td>
|
|
<td>45.23</td>
|
|
<td>39.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Apple</th>
|
|
<td>25.4</td>
|
|
<td>30.2</td>
|
|
<td>33.3</td>
|
|
<td>36.7</td>
|
|
</tr>
|
|
<tr>
|
|
<th>IBM</th>
|
|
<td>20.4</td>
|
|
<td>15.6</td>
|
|
<td>22.3</td>
|
|
<td>29.3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Header border</h2>
|
|
<p>Using the "header-border" class, you can add a border beneath the table's header row.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="header-border">
|
|
<thead>
|
|
<tr>
|
|
<th class="width-1of4">Comedy</th>
|
|
<th class="width-1of4">Adventure</th>
|
|
<th class="width-1of4">Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="header-border">
|
|
<thead>
|
|
<tr>
|
|
<th class="width-1of5">Company</th>
|
|
<td class="width-1of5">Q1</td>
|
|
<td class="width-1of5">Q2</td>
|
|
<td class="width-1of5">Q3</td>
|
|
<td>Q4</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>Microsoft</th>
|
|
<td>20.3</td>
|
|
<td>30.5</td>
|
|
<td>23.5</td>
|
|
<td>40.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Google</th>
|
|
<td>50.2</td>
|
|
<td>40.63</td>
|
|
<td>45.23</td>
|
|
<td>39.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Apple</th>
|
|
<td>25.4</td>
|
|
<td>30.2</td>
|
|
<td>33.3</td>
|
|
<td>36.7</td>
|
|
</tr>
|
|
<tr>
|
|
<th>IBM</th>
|
|
<td>20.4</td>
|
|
<td>15.6</td>
|
|
<td>22.3</td>
|
|
<td>29.3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Horizontal border</h2>
|
|
<p>Using the "horizontal-border" class, you can add a beneath all table rows.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="horizontal-border">
|
|
<tr>
|
|
<th class="width-1of4">Comedy</th>
|
|
<th class="width-1of4">Adventure</th>
|
|
<th class="width-1of4">Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Border</h2>
|
|
<p>Using the "border" class, you can add a border to all table cells.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="border">
|
|
<tr>
|
|
<th class="width-1of4">Comedy</th>
|
|
<th class="width-1of4">Adventure</th>
|
|
<th class="width-1of4">Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Box</h2>
|
|
<p>Using the "box" class, you can add a border to your table.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="box">
|
|
<tr>
|
|
<th class="width-1of4">Comedy</th>
|
|
<th class="width-1of4">Adventure</th>
|
|
<th class="width-1of4">Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Outline</h2>
|
|
<p>Using the "outline" class, you can add an extra-thick black border to your table.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="outline">
|
|
<tr>
|
|
<th class="width-1of4">Comedy</th>
|
|
<th class="width-1of4">Adventure</th>
|
|
<th class="width-1of4">Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Block</h2>
|
|
<p>Using the "block" class, you can add a border to your table's columns.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="block">
|
|
<tr>
|
|
<th>Company</th>
|
|
<td>Q1</td>
|
|
<td>Q2</td>
|
|
<td>Q3</td>
|
|
<td>Q4</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Microsoft</th>
|
|
<td>20.3</td>
|
|
<td>30.5</td>
|
|
<td>23.5</td>
|
|
<td>40.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Google</th>
|
|
<td>50.2</td>
|
|
<td>40.63</td>
|
|
<td>45.23</td>
|
|
<td>39.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Apple</th>
|
|
<td>25.4</td>
|
|
<td>30.2</td>
|
|
<td>33.3</td>
|
|
<td>36.7</td>
|
|
</tr>
|
|
<tr>
|
|
<th>IBM</th>
|
|
<td>20.4</td>
|
|
<td>15.6</td>
|
|
<td>22.3</td>
|
|
<td>29.3</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Datasheet</h2>
|
|
<p>Using the "uppercase-header" class, your table gains a spreadsheet type layout. Add test fields to your table
|
|
cells to make them editable.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="datasheet">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 2%;">#</th>
|
|
<th style="width: 10%;" nowrap="nowrap">ID</th>
|
|
<th style="width: 20%;" nowrap="nowrap">Name</th>
|
|
<th style="width: 22%;" nowrap="nowrap">Dept</th>
|
|
<th style="width: 46%;" nowrap="nowrap">Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>1</th>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>2</th>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>3</th>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>4</th>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
</tr>
|
|
<tr>
|
|
|
|
<th>5</th>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col">
|
|
<div class="cell">
|
|
<h2>Combinations</h2>
|
|
<p>By combining these different techniques, you can easily build many different table layouts without the need for any custom styling. Herebelow
|
|
are common layouts built by combining different table layouts and/or a panel.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell panel">
|
|
<div class="body">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="outline-header horizontal-border">
|
|
<tr>
|
|
<th>Comedy</th>
|
|
<th>Adventure</th>
|
|
<th>Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="box-header uppercase-header block header-border">
|
|
<thead>
|
|
<tr>
|
|
<th class="width-2of6">Company</th>
|
|
<td class="width-1of6">Q1</td>
|
|
<td class="width-1of6">Q2</td>
|
|
<td class="width-1of6">Q3</td>
|
|
<td>Q4</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>Microsoft</th>
|
|
<td>20.3</td>
|
|
<td>30.5</td>
|
|
<td>23.5</td>
|
|
<td>40.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Google</th>
|
|
<td>50.2</td>
|
|
<td>40.63</td>
|
|
<td>45.23</td>
|
|
<td>39.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Apple</th>
|
|
<td>25.4</td>
|
|
<td>30.2</td>
|
|
<td>33.3</td>
|
|
<td>36.7</td>
|
|
</tr>
|
|
<tr>
|
|
<th>IBM</th>
|
|
<td>20.4</td>
|
|
<td>15.6</td>
|
|
<td>22.3</td>
|
|
<td>29.3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="box-header header-border">
|
|
<thead>
|
|
<tr>
|
|
<th class="width-2of6">Company</th>
|
|
<td class="width-1of6">Q1</td>
|
|
<td class="width-1of6">Q2</td>
|
|
<td class="width-1of6">Q3</td>
|
|
<td>Q4</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>Microsoft</th>
|
|
<td>20.3</td>
|
|
<td>30.5</td>
|
|
<td>23.5</td>
|
|
<td>40.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Google</th>
|
|
<td>50.2</td>
|
|
<td>40.63</td>
|
|
<td>45.23</td>
|
|
<td>39.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Apple</th>
|
|
<td>25.4</td>
|
|
<td>30.2</td>
|
|
<td>33.3</td>
|
|
<td>36.7</td>
|
|
</tr>
|
|
<tr>
|
|
<th>IBM</th>
|
|
<td>20.4</td>
|
|
<td>15.6</td>
|
|
<td>22.3</td>
|
|
<td>29.3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="outline-header border box-header outline">
|
|
<tr>
|
|
<th>Comedy</th>
|
|
<th>Adventure</th>
|
|
<th>Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell">
|
|
<table class="block box-header outline-header uppercase-header outline">
|
|
<tr>
|
|
<th>Comedy</th>
|
|
<th>Adventure</th>
|
|
<th>Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell">
|
|
<div class="panel">
|
|
<div class="header">
|
|
My Data
|
|
</div>
|
|
<table class="body">
|
|
<tr>
|
|
<th>Comedy</th>
|
|
<th>Adventure</th>
|
|
<th>Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
<div class="footer pagination">
|
|
<ul class="nav">
|
|
<li><a href="#">Prev</a></li>
|
|
<li><a href="#">1</a></li>
|
|
<li><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">Next</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell">
|
|
<div class="panel block">
|
|
<div class="header">
|
|
My Data
|
|
</div>
|
|
<table class="body">
|
|
<tr>
|
|
<th>Comedy</th>
|
|
<th>Adventure</th>
|
|
<th>Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
<div class="footer pagination">
|
|
<ul class="nav">
|
|
<li><a href="#">Prev</a></li>
|
|
<li><a href="#">1</a></li>
|
|
<li><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">Next</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell">
|
|
<div class="panel border">
|
|
<div class="header">
|
|
My Data
|
|
</div>
|
|
<table class="body">
|
|
<tr>
|
|
<th>Comedy</th>
|
|
<th>Adventure</th>
|
|
<th>Action</th>
|
|
<th>Children</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Scary Movie</td>
|
|
<td>Indiana Jones</td>
|
|
<td>The Punisher</td>
|
|
<td>Wall-E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Epic Movie</td>
|
|
<td>Star Wars</td>
|
|
<td>Bad Boys</td>
|
|
<td>Madagascar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spartan</td>
|
|
<td>LOTR</td>
|
|
<td>Die Hard</td>
|
|
<td>Finding Nemo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dr. Dolittle</td>
|
|
<td>The Mummy</td>
|
|
<td>300</td>
|
|
<td>A Bug's Life</td>
|
|
</tr>
|
|
</table>
|
|
<div class="footer pagination">
|
|
<ul class="nav">
|
|
<li><a href="#">Prev</a></li>
|
|
<li><a href="#">1</a></li>
|
|
<li><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">Next</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="cell">
|
|
<div class="panel datasheet">
|
|
<div class="header">
|
|
My Data
|
|
</div>
|
|
<table class="body">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 2%;">#</th>
|
|
<th style="width: 10%;" nowrap="nowrap">ID</th>
|
|
<th style="width: 20%;" nowrap="nowrap">Name</th>
|
|
<th style="width: 22%;" nowrap="nowrap">Dept</th>
|
|
<th style="width: 46%;" nowrap="nowrap">Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>1</th>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>2</th>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>3</th>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>4</th>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
</tr>
|
|
<tr>
|
|
|
|
<th>5</th>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
<td><input type="text" /></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="footer pagination">
|
|
<ul class="nav">
|
|
<li><a href="#">Prev</a></li>
|
|
<li><a href="#">1</a></li>
|
|
<li><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">Next</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site-footer">
|
|
<div class="cell">
|
|
<div id="sociallogos">
|
|
<a href="https://twitter.com/cascadecss"><span class="icon icon-32 icon-twitter"></span></a>
|
|
<a href="http://www.facebook.com/cascadeframework"><span class="icon icon-32 icon-facebook-sign"></span></a>
|
|
<a href="https://github.com/CascadeFramework"><span class="icon icon-32 icon-github"></span></a>
|
|
<div class="col">
|
|
© 2013, <a href="http://www.johnslegers.com/">John Slegers</a>
|
|
</div>
|
|
</div>
|
|
<a href="http://www.cascade-framework.com/" class="powered-by"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="assets/js/app.js"></script>
|
|
</body>
|
|
</html>
|