Fixup table rendering

aufgabe2/css/main.css

@@ -148,11 +148,11 @@ h1 {
     margin-bottom: 15px;
     vertical-align: middle;
     width: 100%;
-    overflow-x: scroll;
+    overflow: hidden;
 }
 
 .world_table {
-    width: 100%
+    width: 100%;
 }
 
 .world_table tr:nth-child(odd) {
@@ -162,6 +162,7 @@ h1 {
 .world_table th {
     background-color: #fff;
     white-space: nowrap; /* kein umbruch bei schmaler ansicht */
+    padding-right: 1em;
 }
 
 .world_table th:hover {
@@ -173,12 +174,15 @@ h1 {
     color: lightgreen;
 }
 
-.world_table th td {
+.world_table td {
     line-height: 1em;
     padding: 11px 0;
     font-size: 14px; /* same as section */
+    white-space: nowrap;
+    padding-right: 1em;
 }
 
+/*
 @media only screen and (max-width: 700px) {
     .world_table>tbody>tr>td,
     .world_table>tbody>tr>th,
@@ -191,8 +195,8 @@ h1 {
       display: none;
     }
 }
+*/
 
-/*
 @media only screen and (max-width: 1200px) {
     .world_table th:nth-child(n+7), .world_table td:nth-child(n+7) {
         display: none;
@@ -208,7 +212,6 @@ h1 {
         display: none;
     }
 }
-*/
 
 .boxed {
     border: 1px solid green;

aufgabe2/index.php

@@ -72,7 +72,7 @@ error_reporting(E_ALL);
 
 
 </section>
-<div class="page">
+<div id="footer_div" class="page">
     <footer class="footer">
         <div class="foo-left">
             <p>Copyright © 2018 world_data</p>

aufgabe2/js/table.js

@@ -43,55 +43,59 @@ function rerequestFile(path, columns) {
 }
 
 function processData(csv, path) {
-    var columnAmount = 7;
+    let table = document.getElementById('t01');
-    var table = "";
-    var checkbox = "";
 
-    // split rows
+    if (table) {
-    var allTextLines = csv.split(/\r\n|\n/);
+        var columnAmount = 7;
+        var table_content = "";
+        var checkbox = "";
 
-    // create table header
+        // split rows
-    table += "<thead><tr>";
+        var allTextLines = csv.split(/\r\n|\n/);
-    checkbox += "<ul>";
 
-    var data = allTextLines[0].split(",");
+        // create table header
+        table_content += "<thead><tr>";
+        checkbox += "<ul>";
 
-    for (var j = 0; j < columnAmount; j++) {
+        var data = allTextLines[0].split(",");
-        // create table column header
-        table += "<th onclick=\"sortTable(" + j + ")\" >";
-        table += stringPerToSlash(data[j]);
-        table += ' <i class="fas fa-chevron-up"></i>&nbsp;<i class="fas fa-chevron-down"></i>';
-        table += "</th>";
-
-        // create dropdown elements
-        checkbox += "<li>";
-        checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
-        checkbox += data[j];
-        checkbox += "</li>";
-    }
-
-    checkbox += "</ul>";
-    table += "</tr></thead><tbody>";
-
-    // create table content
-    for (var i = 1; i < allTextLines.length; i++) {
-        var data = allTextLines[i].split(',');
-
-        table += "<tr>";
 
         for (var j = 0; j < columnAmount; j++) {
-            table += "<td>";
+            // create table column header
-            table += data[j];
+            table_content += "<th onclick=\"sortTable(" + j + ")\" >";
-            table += "</td>";
+            table_content += stringPerToSlash(data[j]);
+            table_content += ' <i class="fas fa-chevron-up"></i>&nbsp;<i class="fas fa-chevron-down"></i>';
+            table_content += "</th>";
+
+            // create dropdown elements
+            checkbox += "<li>";
+            checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
+            checkbox += data[j];
+            checkbox += "</li>";
         }
 
-        table += "</tr>";
+        checkbox += "</ul>";
+        table_content += "</tr></thead><tbody>";
+
+        // create table content
+        for (var i = 1; i < allTextLines.length; i++) {
+            var data = allTextLines[i].split(',');
+
+            table_content += "<tr>";
+
+            for (var j = 0; j < columnAmount; j++) {
+                table_content += "<td>";
+                table_content += data[j];
+                table_content += "</td>";
+            }
+
+            table_content += "</tr>";
+        }
+
+        table_content += "</tbody>";
+
+        table.innerHTML = table_content;
+        document.getElementById('options').innerHTML = checkbox;
     }
-
-    table += "</tbody>";
-
-    document.getElementById('t01').innerHTML = table;
-    document.getElementById('options').innerHTML = checkbox;
 }
 
 function toggleColumn(file) {
@@ -209,7 +213,7 @@ function sortTable(n) {
             /* Check if the two rows should switch place,
             based on the direction, asc or desc: */
             if (dir == "asc") {
-                // check if the first element is a number, then assume the 
+                // check if the first element is a number, then assume the
                 // second element is also a number
                 if (isNaN(first_element)) {
                     if (first_element > second_element) {
@@ -225,7 +229,7 @@ function sortTable(n) {
                     }
                 }
             } else if (dir == "desc") {
-                // check if the first element is a number, then assume the 
+                // check if the first element is a number, then assume the
                 // second element is also a number
                 if (isNaN(first_element)) {
                     if (first_element < second_element) {

aufgabe2/resources/world_data_sheet.xslt

@@ -25,14 +25,14 @@
                         <thead>
                             <tr>
                                 <th onclick="sortTable(0)">
-                                    id                                    
+                                    id
                                     <i class="fas fa-chevron-up"></i>
-                                    <i class="fas fa-chevron-down"></i>                                    
+                                    <i class="fas fa-chevron-down"></i>
                                 </th>
                                 <th onclick="sortTable(1)">
-                                    name                                    
+                                    name
                                     <i class="fas fa-chevron-up"></i>
-                                    <i class="fas fa-chevron-down"></i>                                    
+                                    <i class="fas fa-chevron-down"></i>
                                 </th>
                                 <th onclick="sortTable(2)">
                                     birth rate / 1000
@@ -59,6 +59,7 @@
                                     <i class="fas fa-chevron-up"></i>
                                     <i class="fas fa-chevron-down"></i>
                                 </th>
+                                <!--
                                 <th onclick="sortTable(7)">
                                     gdp / capita growth
                                     <i class="fas fa-chevron-up"></i>
@@ -94,6 +95,7 @@
                                     <i class="fas fa-chevron-up"></i>
                                     <i class="fas fa-chevron-down"></i>
                                 </th>
+                                -->
                             </tr>
                         </thead>
                         <tbody>
@@ -106,6 +108,7 @@
                                     <td><xsl:value-of select="children_per_woman"/></td>
                                     <td><xsl:value-of select="electricity_consumption_per_capita"/></td>
                                     <td><xsl:value-of select="gdp_per_capita"/></td>
+                                    <!--
                                     <td><xsl:value-of select="gdp__per__capita__growth"/></td>
                                     <td><xsl:value-of select="inflation_annual"/></td>
                                     <td><xsl:value-of select="internet_user_per_100"/></td>
@@ -113,6 +116,7 @@
                                     <td><xsl:value-of select="military_expenditure_percent_of_gdp"/></td>
                                     <td><xsl:value-of select="gps_lat"/></td>
                                     <td><xsl:value-of select="gps_long"/></td>
+                                    -->
                                 </tr>
                             </xsl:for-each>
                         </tbody>