Scrollproblem in Tabelle im Standardmode IE

firemystery

Halli Hallo,

bitte bitte nicht vor der Länge des Codes erschrecken, (ist lang (aber viel nur zu Testzwecken))

Mein Problem: wenn ich nach links und wieder in der tabelle scrolle so scrollt nur der tbody aber nicht der thead...warum???

ich würde auch gern nur den vertikalen Scrollbar der Tabelle sehen und nicht den unteren der Seite.

der thead sollte dann quasi abgeschnitten sein und nur angezeigt werden wenn nach rechts gescrollt wird

Danke schonmal

PS: ich weiss das ganze funktioniert wenn man's im Quirksmode laufen lässt (ohne DOCTYPE) das ist aber keine Lösung für mich

Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<script type="text/javascript">

	function changecss(theClass,element,value) {
	var cssRules;
	if (document.styleSheets[0]['rules']) {
		cssRules = 'rules';
	}
	else {
		cssRules = 'cssRules';
	}

	theClass = theClass.toLowerCase();


	for (var S = 0; S < document.styleSheets.length; S++){
		for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
			var seltxt = document.styleSheets[S][cssRules][R].selectorText;
			if(seltxt) seltxt = seltxt.toLowerCase();
			//alert(seltxt + "=" + theClass);
			if (seltxt == theClass) {
			document.styleSheets[S][cssRules][R].style[element] = value;
			}
		}
	}	
}


function get_document_height() {
	if(window.innerHeight) return window.innerHeight;
	if(document.documentElement.clientHeight) return document.documentElement.clientHeight;
	return null;
}


function get_document_width() {
	if(window.innerWidth) return window.innerWidth;
	if(document.documentElement.clientWidth) return document.documentElement.clientWidth;
	return null;
}


function onload(){
	var base_height = (get_document_height() - 40);
	changecss("div.tableContainer", "height", base_height + "px");

}

</script>

<style type="text/css">
div.tableContainer {
	background-color: #F7F7F7;
	width: 100%;		/* table width will be 99% of this*/
	height: 100%; 	/* must be greater than tbody*/
	overflow: auto;
	}


table {
	width: 100%;
	border: none;
	background-color: #f7f7f7;
}


/*
 * Specific Firefox. Only Modern browser are able to interpret > . IE is not a modern browser
 */	
table>tbody { 
	overflow: hidden;
	overflow-x: hidden;
}


/*
 * Traget is IE5+ only. Only IE is able to interpret this kind of horrible expression Script
 * ----------
 * FOR HEADER
 */
thead tr {
	position:relative; 
	top: expression(offsetParent.scrollTop);
}




/*
 * Classical Css
 */	
thead td, thead th {
	text-align: left;
	font-size: 14px;
	background-color: #fdf5e6;
	color: steelblue;
	font-weight: bold;
	border-top: solid 1px #d8d8d8;
	background-image: url(../images/small.gif);
	background-repeat: no-repeat;
	background-position: right;
	cursor: pointer;
	padding-right: 15px;
}	

td {
	color: #000;
	padding-right: 2px;
	font-size: 12px;
	text-align: right;
	border-bottom: solid 1px #d8d8d8;
	border-left: solid 1px #d8d8d8;
	white-space: nowrap;
}




/*
 * FF scroll hide last column.
 * prevent this case
 */
td:last-child {
	padding-right: 20px;
}
</style>




</head>


<body onLoad="onload();">
<div class="tableContainer">
  <table cellspacing="0">
     <thead>
      <tr> 
        <td>Header cell1</td>
        <td>Header cell2</td>


        <td>Header cell3</td>
        <td>Header cell 4</td>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
      </tr>


    <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>

      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>

      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>


      <tr> 
        <td>z</td>
        <td>z</td>
        <td>z</td>
        <td>z</td>
      </tr>


    </tbody>
  </table>


</div>




</div> 
</body>
</html>

Alles anzeigen

[/code]

firemystery

*push*

ich brauch da echt HILFE bitte!?!?

infernalshade

keine ahnung was du meinst, hast du irgendwo ein beispiel anzusehen?!

driver

tut mir leid, aber ich versteh nicht ganz was du meinst.
ich hab mir den quellcode mal kopiert. is halt ne tabelle
in der ich h und v scrollen kann. ganz normal. scrollt
bei mir auch head + body

infernalshade

Jetzt seh ich was du meinst...Ähm mach mal im body den div aussen rum weg...dann gehts bei mir! Also nur oben <body onLoad="onload();"><table> und unten </table></body> !

mfg
infernalshade

PS: Das Problem liegt hieran:

Code

div.tableContainer { 
   background-color: #F7F7F7; 
   width: 100%;      /* table width will be 99% of this*/ 
   height: 100%;    /* must be greater than tbody*/ 
   overflow: auto; 
   }

width:100%; heißt für den Browser nur 100% des Anzeigebereiches und nicht zusätzlich dem Anzeigebereiches der über die Breite hinaus geht!
wenn du den div nicht wegmachen willst, nimm mal aus dem CSS das width komplett raus oder setze einen festen wert, z.b. 1500px oder so!

mfg
infernalshade

firemystery

Vielen Dank für die Antworten...

das oben is nur n Beispiel, meine Seite, die das Problem immer noch hat, gibts nur lokal.
Komischerweise funktioniert heute das Beispiel oben auf einmal, ohne dass ich irgendwas geändert hab.

Wenn ich width auf nen festen Wert setze ändert sich auf meiner Seite leider nichts, es scrollt immer noch nur der tbody. den div kann ich nicht rausnehmen

Aber nochmal danke für's anschauen

infernalshade

Also wenn ich dein Beispiel oben 1:1 kopiere, alle div's usw drin lasse und bei width z.b. 2000px eingebe haut alles einwandfrei hin!

mfg

firemystery

Ich habe hier diese IE Developer Toolbar.

Wenn ich im css die width auf 2000px setze, übernimmt er das im Standardmode nicht, wenn ich wieder auf Quirksmode setze, dann stimmt das Attribut...

sehr seltsam find ich

infernalshade

änderst du das nur in der developer toolbar? wenn ja machs mal im quellcode selber!

mfg

firemystery

OK,

den letzten Beitrag oben einfach ignorieren:

wenn ich die width auf eine Größe setze, die groß genug ist, dann scrollt der thead zwar mit, aber ich seh den Scrollbar fürs horizontale Scrollen nicht mehr

außerdem weiss ich nicht wie "breit" die tabelle ist (in px), weil sie dynamisch gefüllt wird.

(Das Problem is nur im IE)

infernalshade

Wenn du das "overflow:auto;" wegmachst kannst sogar width:100%; lassen, dann funktioniert es! (Bei mir zumindest!)

Probier das mal!

mfg

firemystery

Hab's ausprobiert...mein Fehler von oben ist dadurch behoben (VIELEN DANK schonmal)

Aaber (sry)

jetzt scrollt der Tabelleninhalt ja quasi "über den theader hinaus" das ist schlecht weil da eigtl noch n paar Filteroptionen und die Navigation zu sehen ist

infernalshade

Ich sehs ja...

Kannst du die thead so weit hochtun damit man den unteren teil nicht oben rausschauen sieht?

wenn nicht, vllt gleich ein div oberhalb des headers mit background-color:white; und einem höheren z-index?

mfg

firemystery

Ich probiers mal mitm z-index

Vielen vielen Dank nochmal

fühl mich schon ein stück weit schlauer *g*

Tags