|
0
|
1 <!doctype html>
|
|
|
2 <html lang="en">
|
|
|
3 <head>
|
|
|
4 <meta charset="utf-8">
|
|
|
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
6 <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
7 <title>TableSaw Column Toggle Table</title>
|
|
|
8
|
|
|
9 <link rel="stylesheet" href="../dist/tablesaw.css">
|
|
|
10 <link rel="stylesheet" href="demo.css">
|
|
|
11 <link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
|
|
12 <style>
|
|
|
13 th,
|
|
|
14 td {
|
|
|
15 border: 1px solid #000;
|
|
|
16 }
|
|
|
17 </style>
|
|
|
18
|
|
|
19 <script src="../dist/tablesaw.js"></script>
|
|
|
20 <script src="../dist/tablesaw-init.js"></script>
|
|
|
21 <script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
|
|
22 </head>
|
|
|
23 <body>
|
|
|
24 <div class="demo-header">
|
|
|
25 <div class="company">
|
|
|
26 <img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
|
|
27 </div>
|
|
|
28 <div class="details">
|
|
|
29 <h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
|
|
30 <span class="description">A group of plugins for responsive tables.</span>
|
|
|
31 </h1>
|
|
|
32 <ul class="outbound-links">
|
|
|
33 <li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
|
|
34 <li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
|
|
35 </ul>
|
|
|
36 </div>
|
|
|
37 </div>
|
|
|
38 <div class="nav-container">
|
|
|
39 <div class="docs-globalnav">
|
|
|
40 <nav class="docs-nav">
|
|
|
41 <a href="kitchensink.html" class="current">Kitchen Sink</a>
|
|
|
42 <a href="modeswitch.html">Mode Switch</a>
|
|
|
43 <a href="sort.html">Sortable</a>
|
|
|
44 <a href="stack.html">Stack</a>
|
|
|
45 <a href="stackonly.html">Stack Only</a>
|
|
|
46 <a href="swipe.html">Swipe Table</a>
|
|
|
47 <a href="toggle.html">Toggle</a>
|
|
|
48 </nav>
|
|
|
49 </div>
|
|
|
50 </div>
|
|
|
51 <div class="docs-main">
|
|
|
52 <h2>Colspans</h2>
|
|
|
53 <table class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-minimap data-tablesaw-mode-switch>
|
|
|
54 <thead>
|
|
|
55 <tr>
|
|
|
56 <th data-tablesaw-priority="1" colspan="2">H1,2</th>
|
|
|
57 <th data-tablesaw-priority="3">H3</th>
|
|
|
58 <th data-tablesaw-priority="2" colspan="2">H4,5</th>
|
|
|
59 <th data-tablesaw-priority="6">H6</th>
|
|
|
60 <th data-tablesaw-priority="6">H7</th>
|
|
|
61 <th data-tablesaw-priority="6">H8</th>
|
|
|
62 </tr>
|
|
|
63 <tr>
|
|
|
64 <th data-tablesaw-priority="1">H1</th>
|
|
|
65 <th data-tablesaw-priority="3" colspan="3">H2,3,4</th>
|
|
|
66 <th data-tablesaw-priority="6">H5</th>
|
|
|
67 <th data-tablesaw-priority="6">H6</th>
|
|
|
68 <th data-tablesaw-priority="6">H7</th>
|
|
|
69 <th data-tablesaw-priority="6">H8</th>
|
|
|
70 </tr>
|
|
|
71 </thead>
|
|
|
72 <tbody>
|
|
|
73 <tr>
|
|
|
74 <td>1</td>
|
|
|
75 <td>2</td>
|
|
|
76 <td>3</td>
|
|
|
77 <td>4</td>
|
|
|
78 <td>5</td>
|
|
|
79 <td>6</td>
|
|
|
80 <td>7</td>
|
|
|
81 <td>8</td>
|
|
|
82 </tr>
|
|
|
83 <tr>
|
|
|
84 <td>1</td>
|
|
|
85 <td>2</td>
|
|
|
86 <td>3</td>
|
|
|
87 <td colspan="2">4,5</td>
|
|
|
88 <td>6</td>
|
|
|
89 <td>7</td>
|
|
|
90 <td>8</td>
|
|
|
91 </tr>
|
|
|
92 <tr>
|
|
|
93 <td>1</td>
|
|
|
94 <td>2</td>
|
|
|
95 <td>3</td>
|
|
|
96 <td>4</td>
|
|
|
97 <td>5</td>
|
|
|
98 <td>6</td>
|
|
|
99 <td>7</td>
|
|
|
100 <td>8</td>
|
|
|
101 </tr>
|
|
|
102 <tr>
|
|
|
103 <td>1</td>
|
|
|
104 <td>2</td>
|
|
|
105 <td>3</td>
|
|
|
106 <td>4</td>
|
|
|
107 <td>5</td>
|
|
|
108 <td>6</td>
|
|
|
109 <td>7</td>
|
|
|
110 <td>8</td>
|
|
|
111 </tr>
|
|
|
112 <tr>
|
|
|
113 <td>1</td>
|
|
|
114 <td>2</td>
|
|
|
115 <td>3</td>
|
|
|
116 <td>4</td>
|
|
|
117 <td>5</td>
|
|
|
118 <td>6</td>
|
|
|
119 <td>7</td>
|
|
|
120 <td>8</td>
|
|
|
121 </tr>
|
|
|
122 <tr data-tablesaw-ignorerow><td colspan="8">Big long ignored row Big long ignored row Big long ignored row Big long ignored row Big long ignored row Big long ignored row Big long ignored row Big long ignored row Big long ignored row Big long ignored row</td></tr>
|
|
|
123 </tbody>
|
|
|
124 </table>
|
|
|
125 </div>
|
|
|
126
|
|
|
127 </body>
|
|
|
128 </html>
|
