Tabelle sieht mobil nicht mehr ganz scheiße aus

css/main.css

@@ -42,7 +42,13 @@
 }
 
 .page {
-    margin: 0 125px;
+    width: 80%;
+    margin: 0 auto;
+}
+@media only screen and (max-width: 500px) {
+    .page {
+        width: 100%;
+    }
 }
 
 
@@ -98,6 +104,7 @@ h1 {
     margin-bottom: 15px;
     vertical-align: middle;
     width: 100%;
+    overflow-x: scroll;
 }
 
 table#t01 {
@@ -110,6 +117,7 @@ table#t01 tr:nth-child(odd) {
 
 table#t01 th {
     background-color: #fff;
+    white-space: nowrap; /* kein umbruch bei schmaler ansicht */
 }
 /* die sort up sort down icons neben den Spaltennamen  */
 table#t01 th i {
@@ -120,6 +128,23 @@ table#t01 th i {
 table#t01 th, table#t01 td {
     line-height: 1em;
     padding: 11px 0;
+    font-size: 14px; /* same as section */
+}
+
+@media only screen and (max-width: 1200px) {
+    table#t01 th:nth-child(n+7), table#t01 td:nth-child(n+7) {
+        display: none;
+    }
+}
+@media only screen and (max-width: 900px) {
+    table#t01 th:nth-child(n+5), table#t01 td:nth-child(n+5) {
+        display: none;
+    }
+}
+@media only screen and (max-width: 600px) {
+    table#t01 th:nth-child(n+4), table#t01 td:nth-child(n+4) {
+        display: none;
+    }
 }
 
 .boxed {
@@ -148,7 +173,6 @@ th {
 }
 
 .footer{
-    margin: 0 125px;
     border-top: 2px solid lightgreen;
     font-family: 'Roboto', sans-serif;
     display: flex;

index.html

@@ -73,6 +73,7 @@
 
 
     </div>
+    <div class="page">
         <footer class="footer">
             <div class="foo-left">
                 <p>Copyright © 2018 world_data</p>
@@ -82,6 +83,7 @@
                 <p>This solution has been created by: <br> Team 26</p>
             </div>
         </footer>
+    </div>
 </body>
 
 </html>