Rearrange a table for usability on mobile in HTML/CSS -
i apologize in advance if sounds bit rambling new web development , unsure how describe i'm looking for. basically, have table using display various lab projects internet software course. there 4 columns , 3 rows, , works fine on desktop. however, when viewed on mobile, cells become squished point they're unreadable. table rearrange screen size becomes smaller. instance, if screen half wide table becomes 2 columns wide , 6 rows high. have looked @media
rule in css, unsure how achieve goal without editing html itself.
this actual website sits. appreciated. thanks!
here code table:
<table> <thead> <th colspan="4"><h1>labs</h1></th> </thead> <tr> <td onclick="window.location.href='lab1/lab1.html'" style="background-image: url(images/survey_snip.png);background-position: top;background-size: 140%;"> <h3 class="label">lab 1</h3> <p class="description">this lab customer satisfaction survey fictional car dealership.</p> </td> <td onclick="window.location.href='lab2/lab2a.html'" style="background-image: url(images/table_snip.png);background-position: top;background-size: 140%;"> <h3 class="label">lab 2 (part a)</h3> <p class="description">this lab table lists first ten presidents, birthplaces, , years in office.</p> </td> <td onclick="window.location.href='lab2/lab2b.html'" style="background-image: url(images/survey_snip.png);background-position: top;background-size: 140%;"> <h3 class="label">lab 2 (part b)</h3> <p class="description">this lab continuation of lab 1 css added.</p> </td> <td><h3 class="label">coming soon</h3></td> </tr> <tr> <td><h3 class="label">coming soon</h3></td> <td><h3 class="label">coming soon</h3></td> <td><h3 class="label">coming soon</h3></td> <td><h3 class="label">coming soon</h3></td> </tr> <tr> <td><h3 class="label">coming soon</h3></td> <td><h3 class="label">coming soon</h3></td> <td><h3 class="label">coming soon</h3></td> <td><h3 class="label">coming soon</h3></td> </tr> </table>
below pertinent portion of css:
td { border: 3px solid black; border-radius: 50px; text-align: center; align-content: center; width: 25%; min-width: 250px; height: 33.3%; vertical-align: text-top; margin: auto; } td:hover { cursor: pointer; box-shadow: 0px 4px 2px lightblue, 0px -4px 2px lightblue, 4px 0px 2px lightblue, -4px 0px 2px lightblue; } table { margin: auto; padding: 10px; width: 95%; min-height: 100%; margin-top: 20px; border-spacing: 10px; table-layout: fixed; }
Comments
Post a Comment