Adrian03 Posted November 20 Posted November 20 Ill link my code down bellow, how do I make the mobile view work? HTML: <html> <head> <title>Table layout</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="filter"> </div> <table > <tr> <th>Tittel</th> <th>Navn</th> <th>E-post</th> <th>Telefon</th> </tr> <tr> <td>Lagleder</td> <td>Arne Rognan</td> <td>arne@rognan.com</td> <td>95970236</td> </tr> <tr> <td>Trener</td> <td>Simen Korsbøen</td> <td></td> <td></td> </tr> <tr> <td>Trener</td> <td>Øyvind Stien Johnsen</td> <td>oyvind.johns1@gmail.com</td> <td>90795426</td> </tr> </table> </body> </html> CSS: @import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Roboto'); * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; /* Ensures consistent box model behavior */ } /* Styling for the table */ table { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; /* Adjust this to make the table wider */ max-width: 1200px; /* Optional: Limit the maximum width */ border-collapse: collapse; border-spacing: 0; box-shadow: 0 2px 15px rgba(64, 64, 64, 0.7); border-radius: 12px 12px 0 0; overflow: hidden; } /* Styling for table cells */ td, th { padding: 15px 20px; text-align: center; white-space: nowrap; /* Keeps text in a single line */ } /* Styling for table headers */ th { background-color: #7e7e7e; color: #ffffff; /* Make header text stand out */ font-family: 'Open Sans', Sans-serif; font-weight: 600; text-transform: uppercase; } /* Styling for table rows */ tr { background-color: #fafafa; font-family: 'Montserrat', sans-serif; } /* Zebra striping for table rows */ tr:nth-child(even) { background-color: #eeeeee; } /* Responsive design: Adjust width on smaller screens */ @media (max-width: 768px) { table { width: 100%; /* Table takes up full screen width on smaller devices */ margin: 10px; font-size: 14px; /* Adjust font size */ } td, th { padding: 10px; } } @media (max-width: 768px) { table { width: 100%; /* Full width for mobile screens */ font-size: 14px; /* Reduce font size */ } thead { display: none; /* Hide the header row */ } tr { display: block; /* Make rows block elements */ margin-bottom: 10px; /* Add spacing between rows */ } td { display: block; /* Stack cells vertically */ text-align: left; /* Align text to the left */ padding: 10px; border-bottom: 1px solid #ddd; /* Add separator for each row */ position: relative; /* Enable positioning for pseudo-elements */ } td::before { content: attr(data-label); /* Dynamically pull the label from headers */ position: absolute; left: 10px; top: 10px; font-weight: bold; text-transform: uppercase; color: #7e7e7e; } td:first-child::before { content: "Tittel"; /* Add manual label for first column */ } td:nth-child(2)::before { content: "Navn"; /* Add manual label for second column */ } td:nth-child(3)::before { content: "E-post"; /* Add manual label for third column */ } td:nth-child(4)::before { content: "Telefon"; /* Add manual label for fourth column */ } }
tuanphan Posted November 21 Posted November 21 What should it look like on mobile? Reduce size or? And do you have link to page where you added the code? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment