more CSS an JS voodoo for bugblues table view

2 files changed, 51 insertions, 4 deletions

diff --git a/public/css/base.css b/public/css/base.css
index 3e2d8520..b6e75ac1 100644
--- a/public/css/base.css
+++ b/public/css/base.css
@@ -4,10 +4,8 @@
 }
 
 body {
-    font-family: Arial;
-    sans-serif;
-    font-size:
-    14px;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
 }
 
 header {
@@ -107,6 +105,29 @@ a.sprache img {
 table {
     border-collapse: collapse;
 	margin-top: 5px;
+	display: block;
+}
+
+table.scrollable {
+	max-width: 100%;
+	overflow-x: scroll;
+	overflow-y: hidden;
+}
+
+table.scrollable thead tr {
+	display: block;
+	position: relative;
+}
+
+table.scrollable tbody {
+	display: block;
+	position: relative;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+table.scrollable tbody * {
+	width: auto;
 }
 
 fieldset hr {
diff --git a/public/css/scrolltable.js b/public/css/scrolltable.js
new file mode 100644
index 00000000..1184207f
--- /dev/null
+++ b/public/css/scrolltable.js
@@ -0,0 +1,26 @@
+function scrolltable(elem) {
+	var widths = new Array();
+	var thead = elem.getElementsByTagName('thead')[0];
+	var tbody = elem.getElementsByTagName('tbody')[0];
+	var ths = Array.prototype.slice.call(thead.getElementsByTagName('th'),0);
+	ths = ths.concat(Array.prototype.slice.call(tbody.getElementsByTagName('tr')[0].getElementsByTagName('td'), 0));
+	ths.push(tbody.getElementsByTagName('th')[0]);
+	console.debug(ths);
+	for(var i = 0; i < ths.length; i++)
+		widths.push(ths[i].offsetWidth);
+	widths.push(tbody.offsetWidth);
+	elem.className = elem.className + ' scrollable';
+	var tbodywidth = widths.pop();
+	tbody.style.width = (tbodywidth + 16) + 'px';
+	tbody.style.height = (window.innerHeight - 50) + 'px';
+	for(var i = 0; i < ths.length; i++) {
+		var paddingLeft = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('padding-left'));
+		var paddingRight = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('padding-right'));
+		var borderLeft = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('border-left-width'));
+		var borderRight = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('border-right-width'));
+		var targetwidth = widths.shift();
+		ths[i].style.maxWidth = ths[i].style.minWidth = (targetwidth - paddingLeft - paddingRight - borderRight) + 'px';
+		if (ths[i].offsetWidth > targetwidth)
+			ths[i].style.maxWidth = ths[i].style.minWidth = (parseInt(ths[i].style.minWidth) - 1) + 'px';
+	}
+}