Wiki source code of LSS-P - Mechanical
Version 26.1 by Eric Nantel on 2023/07/07 14:37
Hide last authors
![]() |
25.1 | 1 | {{html}} |
![]() |
26.1 | 2 | <html> |
3 | <head> | ||
4 | <style> | ||
5 | table { | ||
6 | width: 100%; | ||
7 | border-collapse: collapse; | ||
8 | } | ||
9 | |||
10 | th, td { | ||
11 | padding: 8px; | ||
12 | text-align: left; | ||
13 | border-bottom: 1px solid #ddd; | ||
14 | } | ||
15 | |||
16 | /* Media query for mobile devices */ | ||
17 | @media only screen and (max-width: 600px) { | ||
18 | /* Remove the table's default styles */ | ||
19 | table, thead, tbody, th, td, tr { | ||
20 | display: block; | ||
21 | } | ||
22 | |||
23 | /* Hide table headers (th) */ | ||
24 | thead tr { | ||
25 | position: absolute; | ||
26 | top: -9999px; | ||
27 | left: -9999px; | ||
28 | } | ||
29 | |||
30 | td { | ||
31 | border: none; | ||
32 | position: relative; | ||
33 | padding-left: 50%; | ||
34 | } | ||
35 | |||
36 | /* Add a background color to the table rows */ | ||
37 | tr { | ||
38 | margin-bottom: 20px; | ||
39 | } | ||
40 | |||
41 | /* Display the data in each cell */ | ||
42 | td:before { | ||
43 | position: absolute; | ||
44 | top: 6px; | ||
45 | left: 6px; | ||
46 | width: 45%; | ||
47 | padding-right: 10px; | ||
48 | white-space: nowrap; | ||
49 | } | ||
50 | } | ||
51 | </style> | ||
52 | </head> | ||
53 | <body> | ||
54 | <table> | ||
55 | <thead> | ||
56 | <tr> | ||
57 | <th>Name</th> | ||
58 | <th>Age</th> | ||
59 | <th>Email</th> | ||
60 | </tr> | ||
61 | </thead> | ||
62 | <tbody> | ||
63 | <tr> | ||
64 | <td>John Doe</td> | ||
65 | <td>25</td> | ||
66 | <td>[email protected]</td> | ||
67 | </tr> | ||
68 | <tr> | ||
69 | <td>Jane Smith</td> | ||
70 | <td>30</td> | ||
71 | <td>[email protected]</td> | ||
72 | </tr> | ||
73 | <!-- Add more rows as needed --> | ||
74 | </tbody> | ||
75 | </table> | ||
76 | </body> | ||
77 | </html> | ||
![]() |
25.1 | 78 | {{/html}} |