Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Renamed files, added in explanation content

  • Loading branch information...
commit fbe924e013943c21ce4f32e5ccddfe851a0ee3f2 1 parent 1c03fc4
@smileyj68 smileyj68 authored
View
299 index.html
@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8" />
+
+ <!-- Set the viewport width to device width for mobile -->
+ <meta name="viewport" content="width=device-width" />
+
+ <title>Responsive Tables by ZURB</title>
+
+ <!-- Included CSS Files -->
+ <!-- Combine and Compress These CSS Files -->
+ <link rel="stylesheet" href="stylesheets/globals.css">
+ <link rel="stylesheet" href="stylesheets/typography.css">
+ <link rel="stylesheet" href="stylesheets/grid.css">
+ <link rel="stylesheet" href="stylesheets/ui.css">
+ <link rel="stylesheet" href="stylesheets/forms.css">
+ <link rel="stylesheet" href="stylesheets/orbit.css">
+ <link rel="stylesheet" href="stylesheets/reveal.css">
+ <link rel="stylesheet" href="stylesheets/mobile.css">
+ <!-- End Combine and Compress These CSS Files -->
+ <link rel="stylesheet" href="stylesheets/app.css">
+ <link rel="stylesheet" href="responsive-tables.css">
+ <script src="javascripts/jquery.min.js"></script>
+ <script src="responsive-tables.js"></script>
+
+ <!--[if lt IE 9]>
+ <link rel="stylesheet" href="stylesheets/ie.css">
+ <![endif]-->
+
+
+ <!-- IE Fix for HTML5 Tags -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+</head>
+
+<body>
+ <!-- container -->
+ <div class="container">
+
+ <div class="row">
+ <div class="twelve columns">
+ <h1>Responsive Tables</h1>
+ <h4 class="subhead">A CSS/JS solution for tables that allows them to shrink on small devices with sacrificing the value of tables, comparison of columns.</h4>
+
+ <div class="row">
+ <div class="six columns">
+ <p>Our solution for responsive tables requires two included files (both linked on this page): responsive-tables.css and responsive-tables.js.</p>
+ <p>The JS will help us create some new elements on small devices, so we don't have to modify our table markup on the page. The CSS applies the requisite positioning and overflow styles to make the new elements work.</p>
+ </div>
+ <div class="six columns">
+ <pre>
+/* Attach the Table CSS and Javascript */
+<span style="color: #6ab825; font-weight: normal">&lt;link</span> <span style="color: #bbbbbb">rel=</span><span style="color: #ed9d13">"stylesheet"</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"responsive-tables.css"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
+<span style="color: #6ab825; font-weight: normal">&lt;script</span> <span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"stylesheet"</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"responsive-tables.js"</span><span style="color: #6ab825; font-weight: normal"></span><span style="color: #6ab825; font-weight: normal">&lt;/script&gt;</span></pre>
+ </div>
+ </div>
+
+ <hr />
+
+ <div class="row">
+ <div class="nine columns">
+
+ <table class="responsive">
+
+ <tr>
+ <th>Header 1</th>
+ <th>Header 2</th>
+ <th>Header 3</th>
+ <th>Header 4</th>
+ <th>Header 5</th>
+ <th>Header 6</th>
+ <th>Header 7</th>
+ <th>Header 8</th>
+ </tr>
+ <tr>
+ <td>row 1, cell 1</td>
+ <td>row 1, cell 2</td>
+ <td>row 1, cell 3</td>
+ <td>row 1, cell 4</td>
+ <td>row 1, cell 5</td>
+ <td>row 1, cell 6</td>
+ <td>row 1, cell 7</td>
+ <td>row 1, cell 8</td>
+ </tr>
+ <tr>
+ <td>row 2, cell 1</td>
+ <td>row 2, cell 2</td>
+ <td>row 2, cell 3</td>
+ <td>row 2, cell 4</td>
+ <td>row 2, cell 5</td>
+ <td>row 2, cell 6</td>
+ <td>row 2, cell 7</td>
+ <td>row 2, cell 8</td>
+ </tr>
+ <tr>
+ <td>row 3, cell 1</td>
+ <td>row 3, cell 2</td>
+ <td>row 3, cell 3</td>
+ <td>row 3, cell 4</td>
+ <td>row 3, cell 5</td>
+ <td>row 3, cell 6</td>
+ <td>row 3, cell 7</td>
+ <td>row 3, cell 8</td>
+ </tr>
+ <tr>
+ <td>row 4, cell 1</td>
+ <td>row 4, cell 2</td>
+ <td>row 4, cell 3</td>
+ <td>row 4, cell 4</td>
+ <td>row 4, cell 5</td>
+ <td>row 4, cell 6</td>
+ <td>row 4, cell 7</td>
+ <td>row 4, cell 8</td>
+ </tr>
+
+ </table>
+ </div>
+ <div class="three columns">
+ <h5>Small Word Table</h5>
+ <p>In most cases, tables like this are okay at smaller sizes (since they'll break on every small word). However with this many columns a very small device like a phone would still be a problem.</p>
+ <p>By attaching a class of <strong>.responsive</strong> to the table, our JS/CSS will kick in.</p>
+ </div>
+ </div>
+ <hr />
+
+
+ <div class="row">
+ <div class="nine columns">
+ <table class="responsive">
+ <tbody>
+ <tr>
+ <th>Perk</th>
+ <th>Description</th>
+ <th>ID</th>
+ <th>Skill Req</th>
+ <th>Perk Req</th>
+ </tr>
+ <tr>
+ <td>Steel Smithing</td>
+ <td>Can create Steel armor and weapons at forges, and improve them twice as much.</td>
+ <td>000cb40d</td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>Arcane Blacksmith</td>
+ <td>You can improve magical weapons and armor.</td>
+ <td><span style="font-size: x-small" class="idref">0005218e</span></td>
+ <td>60 Smithing</td>
+ <td>Steel Smithing</td>
+ </tr>
+ <tr>
+ <td>Dwarven Smithing</td>
+ <td>Can create Dwarven armor and weapons at forges, and improve them twice as much.</td>
+ <td>000cb40e</td>
+ <td>30 Smithing</td>
+ <td>Steel Smithing</td>
+ </tr>
+ <tr>
+ <td>Orcish Smithing</td>
+ <td>Can create Orcish armor and weapons at forges, and improve them twice as much.</td>
+ <td>000cb410</td>
+ <td>50 Smithing</td>
+ <td>Dwarven Smithing</td>
+ </tr>
+ <tr>
+ <td>Ebony Smithing</td>
+ <td>Can create Ebony armor and weapons at forges</a>, and improve them twice as much.</td>
+ <td>000cb412</td>
+ <td>80 Smithing</td>
+ <td>Orcish Smithing</td>
+ </tr>
+ <tr>
+ <td>Daedric Smithing</td>
+ <td>Can create Daedric armor and weapons at forges, and improve them twice as much.</td>
+ <td>000cb413</span></td>
+ <td>90 Smithing</td>
+ <td>Ebony Smithing</td>
+ </tr>
+ <tr>
+ <td>Elven Smithing</td>
+ <td>Can create Elven armor and weapons at forges, and improve them twice as much.</td>
+ <td>000cb40f</td>
+ <td>30 Smithing</td>
+ <td>Steel Smithing</td>
+ </tr>
+ <tr>
+ <td>Advanced Armors</td>
+ <td>Can create Scaled and Plate armor at forges, and improve them twice as much.
+ <td>000cb414</td>
+ <td>50 Smithing</td>
+ <td>Elven Smithing</td>
+ </tr>
+ <tr>
+ <td>Glass Smithing</td>
+ <td>Can create Glass armor and weapons at forges, and improve them twice as much.</td>
+ <td>000cb411</td>
+ <td>70 Smithing</td>
+ <td>Advanced Armors</td>
+ </tr>
+ <tr>
+ <td>Dragon Armor</td>
+ <td>Can create Dragon armor at forges, and improve them twice as much.</td>
+ <td>00052190</td>
+ <td>100 Smithing</td>
+ <td>Daedric Smithing or Glass Smithing</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="three columns">
+ <h5>Larger Content Table</h5>
+ <p>The effect is even more pronounced on a table like this exciting one detailing how to craft different armor types in Skyrim (we're nerds, okay).</p>
+ <p>Notice on a small device how we maintain the left column with this much content.</p>
+ </div>
+ </div>
+
+ <hr />
+
+ <div class="row">
+ <div class="nine columns">
+
+ <table class="responsive">
+
+ <tr>
+ <th>Header 1</th>
+ <th>Header 2</th>
+ <th>Header 3</th>
+ <th>Header 4</th>
+ <th>Header 5</th>
+ <th>Header 6</th>
+ <th>Header 7</th>
+ <th>Header 8</th>
+ </tr>
+ <tr>
+ <td>Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.</td>
+ <td>row 1, cell 2</td>
+ <td>row 1, cell 3</td>
+ <td>row 1, cell 4</td>
+ <td>row 1, cell 5</td>
+ <td>row 1, cell 6</td>
+ <td>row 1, cell 7</td>
+ <td>row 1, cell 8</td>
+ </tr>
+ <tr>
+ <td>Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.</td>
+ <td>row 2, cell 2</td>
+ <td>row 2, cell 3</td>
+ <td>row 2, cell 4</td>
+ <td>row 2, cell 5</td>
+ <td>row 2, cell 6</td>
+ <td>row 2, cell 7</td>
+ <td>row 2, cell 8</td>
+ </tr>
+ <tr>
+ <td>Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.</td>
+ <td>row 3, cell 2</td>
+ <td>row 3, cell 3</td>
+ <td>row 3, cell 4</td>
+ <td>row 3, cell 5</td>
+ <td>row 3, cell 6</td>
+ <td>row 3, cell 7</td>
+ <td>row 3, cell 8</td>
+ </tr>
+ <tr>
+ <td>Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.</td>
+ <td>row 4, cell 2</td>
+ <td>row 4, cell 3</td>
+ <td>row 4, cell 4</td>
+ <td>row 4, cell 5</td>
+ <td>row 4, cell 6</td>
+ <td>row 4, cell 7</td>
+ <td>row 4, cell 8</td>
+ </tr>
+
+ </table>
+ </div>
+ <div class="three columns">
+ <h5>Very Long 1st Cell Content</h5>
+ <p>Finally, in this example you'll see how this works for very long first-cell content. Both the first cell and the remaining cells are independently scrollable on small devices.</p>
+ <p>We do this so we can correctly predict the height of the cells for both the pinned columns and the rest of the columns.</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+
+</body>
+</html>
View
0  responsive_table.css → responsive-tables.css
File renamed without changes
View
0  responsive_table.js → responsive-tables.js
File renamed without changes
View
261 responsive_table.html
@@ -1,261 +0,0 @@
-<!DOCTYPE html>
-
-<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
-<head>
- <meta charset="utf-8" />
-
- <!-- Set the viewport width to device width for mobile -->
- <meta name="viewport" content="width=device-width" />
-
- <title>Welcome to Foundation</title>
-
- <!-- Included CSS Files -->
- <!-- Combine and Compress These CSS Files -->
- <link rel="stylesheet" href="stylesheets/globals.css">
- <link rel="stylesheet" href="stylesheets/typography.css">
- <link rel="stylesheet" href="stylesheets/grid.css">
- <link rel="stylesheet" href="stylesheets/ui.css">
- <link rel="stylesheet" href="stylesheets/forms.css">
- <link rel="stylesheet" href="stylesheets/orbit.css">
- <link rel="stylesheet" href="stylesheets/reveal.css">
- <link rel="stylesheet" href="stylesheets/mobile.css">
- <!-- End Combine and Compress These CSS Files -->
- <link rel="stylesheet" href="stylesheets/app.css">
- <link rel="stylesheet" href="responsive_table.css">
- <script src="javascripts/jquery.min.js"></script>
- <script src="responsive_table.js"></script>
-
- <!--[if lt IE 9]>
- <link rel="stylesheet" href="stylesheets/ie.css">
- <![endif]-->
-
-
- <!-- IE Fix for HTML5 Tags -->
- <!--[if lt IE 9]>
- <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
-
- <style type="text/css">
- pre { -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0; line-height: 125%; margin-bottom: 30px; }
- </style>
-</head>
-
-<body>
- <!-- container -->
- <div class="container">
-
- <div class="row">
- <div class="twelve columns">
- <h1>Responsive Tables</h1>
-
- <pre>
-/* Attach the Table CSS and Javascript */
-<span style="color: #6ab825; font-weight: normal">&lt;link</span> <span style="color: #bbbbbb">rel=</span><span style="color: #ed9d13">"stylesheet"</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"responsive-tables.css"</span><span style="color: #6ab825; font-weight: normal">&gt;</span>
-<span style="color: #6ab825; font-weight: normal">&lt;script</span> <span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"stylesheet"</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"responsive-tables.js"</span><span style="color: #6ab825; font-weight: normal"></span><span style="color: #6ab825; font-weight: normal">&lt;/script&gt;</span>
- </pre>
-
- <table class="responsive">
-
- <tr>
- <th>Header 1</th>
- <th>Header 2</th>
- <th>Header 3</th>
- <th>Header 4</th>
- <th>Header 5</th>
- <th>Header 6</th>
- <th>Header 7</th>
- <th>Header 8</th>
- </tr>
- <tr>
- <td>row 1, cell 1</td>
- <td>row 1, cell 2</td>
- <td>row 1, cell 3</td>
- <td>row 1, cell 4</td>
- <td>row 1, cell 5</td>
- <td>row 1, cell 6</td>
- <td>row 1, cell 7</td>
- <td>row 1, cell 8</td>
- </tr>
- <tr>
- <td>row 2, cell 1</td>
- <td>row 2, cell 2</td>
- <td>row 2, cell 3</td>
- <td>row 2, cell 4</td>
- <td>row 2, cell 5</td>
- <td>row 2, cell 6</td>
- <td>row 2, cell 7</td>
- <td>row 2, cell 8</td>
- </tr>
- <tr>
- <td>row 3, cell 1</td>
- <td>row 3, cell 2</td>
- <td>row 3, cell 3</td>
- <td>row 3, cell 4</td>
- <td>row 3, cell 5</td>
- <td>row 3, cell 6</td>
- <td>row 3, cell 7</td>
- <td>row 3, cell 8</td>
- </tr>
- <tr>
- <td>row 4, cell 1</td>
- <td>row 4, cell 2</td>
- <td>row 4, cell 3</td>
- <td>row 4, cell 4</td>
- <td>row 4, cell 5</td>
- <td>row 4, cell 6</td>
- <td>row 4, cell 7</td>
- <td>row 4, cell 8</td>
- </tr>
-
- </table>
-
- <table class="responsive">
- <tbody><tr>
- <th>Perk</th>
- <th>Description</th>
- <th>ID</th>
- <th>Skill Req</th>
- <th>Perk Req</th>
- </tr>
- <tr>
- <td>Steel Smithing</td>
- <td>Can create Steel armor and weapons at forges, and improve them twice as much.</td>
- <td>000cb40d</td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>Arcane Blacksmith</td>
- <td>You can improve magical weapons and armor.</td>
- <td><span style="font-size: x-small" class="idref">0005218e</span></td>
- <td>60 Smithing</td>
- <td>Steel Smithing</td>
- </tr>
- <tr>
- <td>Dwarven Smithing</td>
- <td>Can create Dwarven armor and weapons at forges, and improve them twice as much.</td>
- <td>000cb40e</td>
- <td>30 Smithing</td>
- <td>Steel Smithing</td>
- </tr>
- <tr>
- <td>Orcish Smithing</td>
- <td>Can create Orcish armor and weapons at forges, and improve them twice as much.</td>
- <td>000cb410</td>
- <td>50 Smithing</td>
- <td>Dwarven Smithing</td>
- </tr>
- <tr>
- <td>Ebony Smithing</td>
- <td>Can create Ebony armor and weapons at forges</a>, and improve them twice as much.</td>
- <td>000cb412</td>
- <td>80 Smithing</td>
- <td>Orcish Smithing</td>
- </tr>
- <tr>
- <td>Daedric Smithing</td>
- <td>Can create Daedric armor and weapons at forges, and improve them twice as much.</td>
- <td>000cb413</span></td>
- <td>90 Smithing</td>
- <td>Ebony Smithing</td>
- </tr>
- <tr>
- <td>Elven Smithing</td>
- <td>Can create Elven armor and weapons at forges, and improve them twice as much.</td>
- <td>000cb40f</td>
- <td>30 Smithing</td>
- <td>Steel Smithing</td>
- </tr>
- <tr>
- <td>Advanced Armors</td>
- <td>Can create Scaled and Plate armor at forges, and improve them twice as much.
- <td>000cb414</td>
- <td>50 Smithing</td>
- <td>Elven Smithing</td>
- </tr>
- <tr>
- <td>Glass Smithing</td>
- <td>Can create Glass armor and weapons at forges, and improve them twice as much.</td>
- <td>000cb411</td>
- <td>70 Smithing</td>
- <td>Advanced Armors</td>
- </tr>
- <tr>
- <td>Dragon Armor</td>
- <td>Can create Dragon armor at forges, and improve them twice as much.</td>
- <td>00052190</td>
- <td>100 Smithing</td>
- <td>Daedric Smithing or Glass Smithing</td>
- </tr>
- </tbody></table>
-
- <table class="responsive">
-
- <tr>
- <th>Header 1</th>
- <th>Header 2</th>
- <th>Header 3</th>
- <th>Header 4</th>
- <th>Header 5</th>
- <th>Header 6</th>
- <th>Header 7</th>
- <th>Header 8</th>
- </tr>
- <tr>
- <td>Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.</td>
- <td>row 1, cell 2</td>
- <td>row 1, cell 3</td>
- <td>row 1, cell 4</td>
- <td>row 1, cell 5</td>
- <td>row 1, cell 6</td>
- <td>row 1, cell 7</td>
- <td>row 1, cell 8</td>
- </tr>
- <tr>
- <td>Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.</td>
- <td>row 2, cell 2</td>
- <td>row 2, cell 3</td>
- <td>row 2, cell 4</td>
- <td>row 2, cell 5</td>
- <td>row 2, cell 6</td>
- <td>row 2, cell 7</td>
- <td>row 2, cell 8</td>
- </tr>
- <tr>
- <td>Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.</td>
- <td>row 3, cell 2</td>
- <td>row 3, cell 3</td>
- <td>row 3, cell 4</td>
- <td>row 3, cell 5</td>
- <td>row 3, cell 6</td>
- <td>row 3, cell 7</td>
- <td>row 3, cell 8</td>
- </tr>
- <tr>
- <td>Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.</td>
- <td>row 4, cell 2</td>
- <td>row 4, cell 3</td>
- <td>row 4, cell 4</td>
- <td>row 4, cell 5</td>
- <td>row 4, cell 6</td>
- <td>row 4, cell 7</td>
- <td>row 4, cell 8</td>
- </tr>
-
- </table>
-
- <p>Flank jowl ground round, swine shank kielbasa prosciutto pastrami ball tip brisket leberkas ribeye. Chicken biltong hamburger shoulder, prosciutto venison turkey sausage corned beef. Pancetta bresaola ground round, shank t-bone tail short ribs salami. Sirloin chicken turkey, beef ribs fatback ground round meatball beef swine. Andouille short ribs biltong shank strip steak. Cow short loin shank, speck ground round tongue ribeye turducken tail. Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.</p>
- </div>
- </div>
-
-
-
- </div>
-
-
-</body>
-</html>
View
8 stylesheets/app.css
@@ -13,7 +13,13 @@
Shared Styles
----------------------------------------- */
-
+ body { background: #f4f4f4; }
+ .container { max-width: 1000px; box-shadow: 0px 2px 5px rgba(0,0,0,0.25); background: #fff; margin: 0 auto; }
+
+ h1 { margin: 20px 0 0; }
+ h4.subhead { font-weight: lighter; color: #777; margin-bottom: 20px; }
+
+ pre { -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0; line-height: 125%; margin-bottom: 30px; }
/* -----------------------------------------
Page Name 1
Please sign in to comment.
Something went wrong with that request. Please try again.