Changes for page LSS-P - Mechanical

Last modified by Eric Nantel on 2024/07/03 09:43

From version < 30.1 >

edited by Eric Nantel
on 2023/07/07 14:41

To version < 26.1 >

edited by Eric Nantel
on 2023/07/07 14:37

< >

Change comment: There is no comment for this version

Summary

Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

@@ -15,64
          +15,62 @@
      /* Media query for mobile devices */
      @media only screen and (max-width: 600px) {
--      /* Stack the table columns vertically */
--      td {
++      /* Remove the table's default styles */
++      table, thead, tbody, th, td, tr {
          display: block;
        }
--      /* Add spacing between stacked columns */
--      td:not(:first-child) {
--        margin-top: 10px;
++      /* Hide table headers (th) */
++      thead tr {
++        position: absolute;
++        top: -9999px;
++        left: -9999px;
        }
--      /* Hide table headers (th) */
--      th {
--        display: none;
++      td {
++        border: none;
++        position: relative;
++        padding-left: 50%;
        }
++
++      /* Add a background color to the table rows */
++      tr {
++        margin-bottom: 20px;
++      }
++
++      /* Display the data in each cell */
++      td:before {
++        position: absolute;
++        top: 6px;
++        left: 6px;
++        width: 45%;
++        padding-right: 10px;
++        white-space: nowrap;
++      }
      }
    </style>
  </head>
  <body>
    <table>
++    <thead>
++      <tr>
++        <th>Name</th>
++        <th>Age</th>
++        <th>Email</th>
++      </tr>
++    </thead>
      <tbody>
        <tr>
--        <td>
--          <table>
--            <thead>
--              <tr>
--                <th>Column 1</th>
--              </tr>
--            </thead>
--            <tbody>
--              <tr>
--                <td>Data 1</td>
--              </tr>
--              <tr>
--                <td>Data 3</td>
--              </tr>
--              <!-- Add more rows as needed -->
--            </tbody>
--          </table>
--        </td>
--        <td>
--          <table>
--            <thead>
--              <tr>
--                <th>Column 2</th>
--              </tr>
--            </thead>
--            <tbody>
--              <tr>
--                <td>Data 2</td>
--              </tr>
--              <tr>
--                <td>Data 4</td>
--              </tr>
--              <!-- Add more rows as needed -->
--            </tbody>
--          </table>
--        </td>
++        <td>John Doe</td>
++        <td>25</td>
++        <td>[email protected]</td>
        </tr>
++      <tr>
++        <td>Jane Smith</td>
++        <td>30</td>
++        <td>[email protected]</td>
++      </tr>
++      <!-- Add more rows as needed -->
      </tbody>
    </table>
  </body>

Changes for page LSS-P - Mechanical

Summary

Details

Navigation

Recently Visited