Changes for page LSS-P - Mechanical
Last modified by Eric Nantel on 2024/07/03 09:43
Change comment: There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -1,5 +1,4 @@ 1 1 {{html}} 2 -<!DOCTYPE html> 3 3 <html> 4 4 <head> 5 5 <style> ... ... @@ -16,20 +16,38 @@ 16 16 17 17 /* Media query for mobile devices */ 18 18 @media only screen and (max-width: 600px) { 19 - /* Stackthe tablecolumnsvertically */20 - td { 18 + /* Remove the table's default styles */ 19 + table, thead, tbody, th, td, tr { 21 21 display: block; 22 22 } 23 23 24 - /* Add spacing between stacked columns */ 25 - td:not(:first-child) { 26 - margin-top: 10px; 23 + /* Hide table headers (th) */ 24 + thead tr { 25 + position: absolute; 26 + top: -9999px; 27 + left: -9999px; 27 27 } 28 28 29 - /* Hide table headers (th) */ 30 - th { 31 - display: none; 30 + td { 31 + border: none; 32 + position: relative; 33 + padding-left: 50%; 32 32 } 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 + } 33 33 } 34 34 </style> 35 35 </head> ... ... @@ -37,18 +37,21 @@ 37 37 <table> 38 38 <thead> 39 39 <tr> 40 - <th>Column 1</th> 41 - <th>Column 2</th> 57 + <th>Name</th> 58 + <th>Age</th> 59 + <th>Email</th> 42 42 </tr> 43 43 </thead> 44 44 <tbody> 45 45 <tr> 46 - <td>Data 1</td> 47 - <td>Data 2</td> 64 + <td>John Doe</td> 65 + <td>25</td> 66 + <td>[email protected]</td> 48 48 </tr> 49 49 <tr> 50 - <td>Data 3</td> 51 - <td>Data 4</td> 69 + <td>Jane Smith</td> 70 + <td>30</td> 71 + <td>[email protected]</td> 52 52 </tr> 53 53 <!-- Add more rows as needed --> 54 54 </tbody>