CSS für Tabelle angepasst, + JS Kleinkram

css/main.css

@@ -93,39 +93,37 @@ h1 {
 
 
 
-.table {
+.table-wrapper {
     font-family: 'Roboto', sans-serif;
     margin-bottom: 15px;
     vertical-align: middle;
+    width: 100%;
 }
 
-/*table#t01 {
+table#t01 {
     width: 100%;
-    background-color: deeppink;
-    text-align: left;
-    vertical-align: middle;
-}*/
+}
 
 table#t01 tr:nth-child(even) {
     background-color: lightgray;
-    height: 2em;
-    vertical-align: middle;
 }
 
 table#t01 tr:nth-child(odd) {
     background-color: white;
-    height: 2em;
 }
 
 table#t01 th {
-    padding: 15px;
     background-color: white;
 }
 
+table#t01 th, table#t01 td {
+    line-height: 1em;
+    padding: 5px 8px;
+}
+
 .boxed {
     border: 1px solid green;
     width: 80%;
-    box-align: center;
     text-align: center;
 }
 
@@ -142,7 +140,7 @@ th {
     min-width: 250px;
 }
 
-.Div {
+.div {
     display: none;
     border: 2px solid lightgreen;
     min-width: 50px;

css/reset.css

@@ -98,8 +98,6 @@ input[type="checkbox"] {vertical-align: bottom;}
 
 select, input, textarea {font: 99% sans-serif;}
 
-table {font-size: inherit; font: 100%; text-align: 'left'}
-
 small {font-size: 85%;}
 
 strong {font-weight: bold;}

index.html

@@ -65,9 +65,9 @@
         </p>
         <p class="hideOptions">Show/Hide: </p>
         <button href="javascript:/" onClick="div_change('options')">Show Options</button>
-        <div id="options" class=Div></div>
+        <div id="options" class="div"></div>
 
-        <div class="table">
+        <div class="table-wrapper">
             <table id="t01"></table>
         </div>
 

js/table.js

@@ -58,7 +58,7 @@ function processData(csv, path) {
     for (var j = 0; j < columnAmount; j++) {
         // create table column header
         table += "<th onclick=\"sortTable(" + j + ")\" >";
-        table += data[j];
+        table += stringPerToSlash(data[j]);
         table += "</th>";
 
         // create dropdown elements
@@ -167,7 +167,7 @@ function updateTable(csv, columns) {
         table += "</tr>";
     }
 
-    document.getElementById('t01').innerHTML = table;
+    document.querySelector('#t01').innerHTML = table;
 }
 
 function sortTable(n) {
@@ -255,6 +255,10 @@ function sortTable(n) {
     }
 }
 
+function stringPerToSlash(columnname) {
+    return columnname.includes(" per ") ? columnname.replace(" per ", " / ") : columnname;
+}
+
 function div_change(strID) {
     document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none') ? 'inline-block' : 'none';
     document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none') ? 'inline-block' : 'none';

resources/world_data_v1.csv

@@ -1,4 +1,4 @@
-id ,name                ,birth rate per 1000,cell phones per 100,children per woman,electricity consumption per capita,gdp_ per_ capita,gdp_ per_ capita_ growth,inflation annual,internet user per 100,life expectancy,military expenditure percent of gdp,gps_lat      ,gps_long
+ID ,Country             ,birth rate per 1000,cell phones per 100,children per woman,electricity consumption per capita,gdp per_capita,gdp_ per_ capita_ growth,inflation annual,internet user per 100,life expectancy,military expenditure percent of gdp,gps_lat      ,gps_long
 001,Brazil              ,16.405             ,90.01936334        ,1.862             ,2201.808724                       ,4424.758692   ,-1.520402823         ,8.228535058     ,39.22                ,74             ,1.615173655                        ,-14.235004000,-51.925280000
 002,Canada              ,10.625             ,70.70997244        ,1.668             ,15119.76414                       ,25069.86915   ,-3.953353186         ,2.944408564     ,80.17086651          ,80.9           ,1.415710422                        ,56.130366000 ,-106.346771000
 003,Chile               ,15.04              ,97.01862561        ,1.873             ,3276.06449                        ,6451.631126   ,-2.610485847         ,7.47050527      ,38.8                 ,78.8           ,3.064076139                        ,-35.675147000,71.542969000