diff --git a/css/main.css b/css/main.css index 167209e..f9554de 100644 --- a/css/main.css +++ b/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; diff --git a/css/reset.css b/css/reset.css index 31bd650..d4ce537 100644 --- a/css/reset.css +++ b/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;} diff --git a/index.html b/index.html index 59cedff..5769311 100644 --- a/index.html +++ b/index.html @@ -65,9 +65,9 @@

Show/Hide:

-
+
-
+
diff --git a/js/table.js b/js/table.js index 654cef0..d8de0a5 100644 --- a/js/table.js +++ b/js/table.js @@ -58,7 +58,7 @@ function processData(csv, path) { for (var j = 0; j < columnAmount; j++) { // create table column header table += ""; - table += data[j]; + table += stringPerToSlash(data[j]); table += ""; // create dropdown elements @@ -167,7 +167,7 @@ function updateTable(csv, columns) { table += ""; } - 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'; diff --git a/resources/world_data_v1.csv b/resources/world_data_v1.csv index ad12621..85530b0 100644 --- a/resources/world_data_v1.csv +++ b/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