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,4 +1,5 @@ 1 1 {{html}} 2 +<!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <style> ... ... @@ -15,38 +15,20 @@ 15 15 16 16 /* Media query for mobile devices */ 17 17 @media only screen and (max-width: 600px) { 18 - /* Removethe table'sdefault styles*/19 - t able, thead,tbody, th, td, tr{19 + /* Stack the table columns vertically */ 20 + td { 20 20 display: block; 21 21 } 22 22 23 - /* Hide table headers (th) */ 24 - thead tr { 25 - position: absolute; 26 - top: -9999px; 27 - left: -9999px; 24 + /* Add spacing between stacked columns */ 25 + td:not(:first-child) { 26 + margin-top: 10px; 28 28 } 29 29 30 - td { 31 - border: none; 32 - position: relative; 33 - padding-left: 50%; 29 + /* Hide table headers (th) */ 30 + th { 31 + display: none; 34 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 50 } 51 51 </style> 52 52 </head> ... ... @@ -54,21 +54,18 @@ 54 54 <table> 55 55 <thead> 56 56 <tr> 57 - <th>Name</th> 58 - <th>Age</th> 59 - <th>Email</th> 40 + <th>Column 1</th> 41 + <th>Column 2</th> 60 60 </tr> 61 61 </thead> 62 62 <tbody> 63 63 <tr> 64 - <td>John Doe</td> 65 - <td>25</td> 66 - <td>[email protected]</td> 46 + <td>Data 1</td> 47 + <td>Data 2</td> 67 67 </tr> 68 68 <tr> 69 - <td>Jane Smith</td> 70 - <td>30</td> 71 - <td>[email protected]</td> 50 + <td>Data 3</td> 51 + <td>Data 4</td> 72 72 </tr> 73 73 <!-- Add more rows as needed --> 74 74 </tbody>