UNPKG

2.83 kBHTMLView Raw
1<!doctype html>
2<html lang="en">
3 <head>
4 ${require('./_head.html')
5 title="Horizontal scroller"
6 description="&lt;figure&gt; acts as a container to make any content scrollable horizontally."
7 canonical="scroller.html"
8 }
9 </head>
10
11 <body>
12 ${require('./_nav.html')}
13
14 <main class="container" id="docs">
15 ${require('./_sidebar.html') active="scroller-link"}
16
17 <div role="document">
18 <section id="scroller">
19 <hgroup>
20 <h1>Horizontal scroller</h1>
21 <h2><code>&lt;<b>figure</b>&gt;</code> acts as a container to make any content scrollable horizontally.</h2>
22 </hgroup>
23 <p>Useful to have responsive <code>&lt;<b>table</b>&gt;</code></p>
24 <figure>
25 <table role="grid">
26 <thead>
27 <tr>
28 <th scope="col">#</th>
29 <th scope="col">Heading</th>
30 <th scope="col">Heading</th>
31 <th scope="col">Heading</th>
32 <th scope="col">Heading</th>
33 <th scope="col">Heading</th>
34 <th scope="col">Heading</th>
35 <th scope="col">Heading</th>
36 <th scope="col">Heading</th>
37 <th scope="col">Heading</th>
38 </tr>
39 </thead>
40 <tbody>
41 <tr>
42 <th scope="row">1</th>
43 <td>Cell</td>
44 <td>Cell</td>
45 <td>Cell</td>
46 <td>Cell</td>
47 <td>Cell</td>
48 <td>Cell</td>
49 <td>Cell</td>
50 <td>Cell</td>
51 <td>Cell</td>
52 </tr>
53 <tr>
54 <th scope="row">2</th>
55 <td>Cell</td>
56 <td>Cell</td>
57 <td>Cell</td>
58 <td>Cell</td>
59 <td>Cell</td>
60 <td>Cell</td>
61 <td>Cell</td>
62 <td>Cell</td>
63 <td>Cell</td>
64 </tr>
65 <tr>
66 <th scope="row">3</th>
67 <td>Cell</td>
68 <td>Cell</td>
69 <td>Cell</td>
70 <td>Cell</td>
71 <td>Cell</td>
72 <td>Cell</td>
73 <td>Cell</td>
74 <td>Cell</td>
75 <td>Cell</td>
76 </tr>
77 </tbody>
78 </table>
79 </figure>
80
81<pre><code>&lt;<b>figure</b>&gt;
82 &lt;<b>table</b>&gt;
83 …
84 &lt;/<b>table</b>&gt;
85&lt;/<b>figure</b>&gt;</code></pre>
86
87 </section>
88
89 ${require('./_footer.html')}
90
91 </div>
92 </main>
93 <script src="js/commons.min.js"></script>
94 </body>
95</html>