-
Notifications
You must be signed in to change notification settings - Fork 0
/
anti-demo.html
68 lines (60 loc) · 2.63 KB
/
anti-demo.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
<head>
<!-- We increase the scale on mobile devices for demonstration purposes, because many mobile devices pixel density
is so high that you don't even see the table's overflow behavior on mobile. -->
<meta name="viewport" content="initial-scale=1.7, maximum-scale=1.7">
<title>anti-demo.html</title>
</head>
<!--
Here we have some exemplary css for tables, which corresponds to the css for the minified tables we defined later.
You can also use any other table css, but make sure to properly modify the small-table-css to work well with your
large-table-css:
-->
<link rel="stylesheet" href="large-table-styling.css">
<!-- Quick explanation: -->
<p>
The idea of this page is to demonstrate a css & js trick that stops tables from overflowing on mobile, and displays them in a special non-overflowing styling instead.<br>
You can read more about this <a href="https://github.com/phseiff/tiny-tables">on the project's GitHub page</a>.<br><br>
If you are on mobile, you can switch to desktop view (probably somewhere in the hamburger menu) to see how the demo looks on desktop.<br/>
If you are on desktop, you can use Ctrl+Shift+I to get a console window, in which you can then choose to see the page in a mobile-like size.<br/><br/>
Note that this page is an anti-demo, which means that it shows how it would look like <em>without</em> the trick.<br>
To see how it look with the trick, see <a href="https://phseiff.com/tiny-tables/demo">here</a>.
</p>
<!-- Here we have some html for demonstration purposes: -->
<p>Demonstration table 1 (lots of text):</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill Jill </td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<p>Demonstration table 2 (some images):</p>
<table>
<tr>
<th>image 1</th>
<th>comment</th>
<th>image 2</th>
</tr>
<tr>
<td>
<img width="300px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Image-Omnidirectional_image_computer_lab.jpg/800px-Image-Omnidirectional_image_computer_lab.jpg">
</td>
<td>
foo bar
</td>
<td>
<img width="200px" src="https://c.pxhere.com/images/38/b3/1131303fe23a144034881294fa34-1566387.jpg!d">
</td>
</tr>
</table>
<p>See <a href="https://phseiff.com/tiny-tables/demo">here</a> to see how this would behave with our css & js trick!</p>