forked from zurb/responsive-tables
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
302 lines (271 loc) · 10.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
<!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 without sacrificing the value of tables, comparison of columns.</h4>
<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>
<pre>
/* Attach the Table CSS and Javascript */
<span style="color: #6ab825; font-weight: normal"><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">></span>
<span style="color: #6ab825; font-weight: normal"><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"></script></span></pre>
<hr />
<h5>Small Word Table</h5>
<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 class="row">
<div class="six columns">
<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>
</div>
<div class="six columns">
<p>By attaching a class of <strong>.responsive</strong> to the table, our JS/CSS will kick in.</p>
</div>
</div>
<pre>
/* Put the responsive class on the table */
<span style="color: #6ab825; font-weight: normal"><table</span> <span style="color: #bbbbbb">class=</span><span style="color: #ed9d13">"responsive"</span><span style="color: #6ab825; font-weight: normal">></span>
<span style="color: #6ab825; font-weight: normal"><tr></span> …
</pre>
<hr />
<h5>Larger Content Table</h5>
<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 class="row">
<div class="six columns">
<p>The effect is even more pronounced on a table like this one, where we detail how to craft different armor types in Skyrim (we're nerds, okay).</p>
</div>
<div class="six columns">
<p>Notice on a small device how we maintain the left column when it has so much content.</p>
</div>
</div>
<hr />
<h5>Very Long 1st Cell Content</h5>
<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 class="row">
<div class="six columns">
<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>
</div>
<div class="six columns">
<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>