Uni/WME
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Update table column wrapping

Browse source
This commit is contained in:
hodasemi 2018-11-15 15:38:02 +01:00
parent ed0c2ef328
commit 65c3f0cacc
2 changed files with 26 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
aufgabe2/css/main.css
View file

@ -164,6 +164,10 @@ h1 {
white-space: nowrap; /* kein umbruch bei schmaler ansicht */ white-space: nowrap; /* kein umbruch bei schmaler ansicht */
} }
.world_table th:hover {
cursor: pointer;
}
.world_table th i { .world_table th i {
font-size: 0.6em; font-size: 0.6em;
color: lightgreen; color: lightgreen;
@ -175,47 +179,36 @@ h1 {
font-size: 14px; /* same as section */ font-size: 14px; /* same as section */
} }
@media only screen and (max-width: 700px) {
.world_table>tbody>tr>td,
.world_table>tbody>tr>th,
.world_table>thead>tr>td,
.world_table>thead>tr>th {
display: block;
min-width: 100%!important;
}
.world_table>thead>tr>th {
display: none;
}
}
/* /*
table#t01 {
width: 100%;
}
table#t01 tr:nth-child(odd) {
background-color: lightgrey;
}
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 {
font-size: 0.6em;
color: lightgreen;
}
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) { @media only screen and (max-width: 1200px) {
table#t01 th:nth-child(n+7), table#t01 td:nth-child(n+7) { .world_table th:nth-child(n+7), .world_table td:nth-child(n+7) {
display: none; display: none;
} }
} }
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
table#t01 th:nth-child(n+5), table#t01 td:nth-child(n+5) { .world_table th:nth-child(n+5), .world_table td:nth-child(n+5) {
display: none; display: none;
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
table#t01 th:nth-child(n+4), table#t01 td:nth-child(n+4) { .world_table th:nth-child(n+4), .world_table td:nth-child(n+4) {
display: none; display: none;
} }
} }
*/
.boxed { .boxed {
border: 1px solid green; border: 1px solid green;

13
aufgabe2/js/table.js
View file

@ -135,7 +135,7 @@ function updateTable(csv, columns) {
var allTextLines = csv.split(/\r\n|\n/); var allTextLines = csv.split(/\r\n|\n/);
// create table header // create table header
table += "<tr>"; table += "<thead><tr>";
var data = allTextLines[0].split(","); var data = allTextLines[0].split(",");
var discarded_indices = []; var discarded_indices = [];
@ -152,7 +152,7 @@ function updateTable(csv, columns) {
} }
// checkbox += "</ul>"; // checkbox += "</ul>";
table += "</tr>"; table += "</thead></tr><tbody>";
// create table content // create table content
for (var i = 1; i < allTextLines.length; i++) { for (var i = 1; i < allTextLines.length; i++) {
@ -171,6 +171,8 @@ function updateTable(csv, columns) {
table += "</tr>"; table += "</tr>";
} }
table += "</tbody>";
document.querySelector('#t01').innerHTML = table; document.querySelector('#t01').innerHTML = table;
} }
@ -178,12 +180,7 @@ function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
switching = true; switching = true;
table = document.getElementById("t01"); table = document.getElementsByClassName("world_table")[0];
// xslt table workaround
if (table === null) {
table = document.getElementById("t02");
}
// Set the sorting direction to ascending: // Set the sorting direction to ascending:
dir = "asc"; dir = "asc";