Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 14

Thema: Scrollproblem in Tabelle im Standardmode IE

  1. #1
    firemystery
    Gast

    Standard Scrollproblem in Tabelle im Standardmode IE

    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:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <script type="text/javascript">
    	
    	function changecss&#40;theClass,element,value&#41; &#123;
    	var cssRules;
    	if &#40;document.styleSheets&#91;0&#93;&#91;'rules'&#93;&#41; &#123;
    		cssRules = 'rules';
    	&#125;
    	else &#123;
    		cssRules = 'cssRules';
    	&#125;
    	
    	theClass = theClass.toLowerCase&#40;&#41;;
    
    	for &#40;var S = 0; S < document.styleSheets.length; S++&#41;&#123;
    		for &#40;var R = 0; R < document.styleSheets&#91;S&#93;&#91;cssRules&#93;.length; R++&#41; &#123;
    			var seltxt = document.styleSheets&#91;S&#93;&#91;cssRules&#93;&#91;R&#93;.selectorText;
    			if&#40;seltxt&#41; seltxt = seltxt.toLowerCase&#40;&#41;;
    			//alert&#40;seltxt + "=" + theClass&#41;;
    			if &#40;seltxt == theClass&#41; &#123;
    			document.styleSheets&#91;S&#93;&#91;cssRules&#93;&#91;R&#93;.style&#91;element&#93; = value;
    			&#125;
    		&#125;
    	&#125;	
    &#125;
    
    function get_document_height&#40;&#41; &#123;
    	if&#40;window.innerHeight&#41; return window.innerHeight;
    	if&#40;document.documentElement.clientHeight&#41; return document.documentElement.clientHeight;
    	return null;
    &#125;
    
    function get_document_width&#40;&#41; &#123;
    	if&#40;window.innerWidth&#41; return window.innerWidth;
    	if&#40;document.documentElement.clientWidth&#41; return document.documentElement.clientWidth;
    	return null;
    &#125;
    
    function onload&#40;&#41;&#123;
    	var base_height = &#40;get_document_height&#40;&#41; - 40&#41;;
    	changecss&#40;"div.tableContainer", "height", base_height + "px"&#41;;
    	
    &#125;
    	
    </script>
    	
    <style type="text/css">
    div.tableContainer &#123;
    	background-color&#58; #F7F7F7;
    	width&#58; 100%;		/* table width will be 99% of this*/
    	height&#58; 100%; 	/* must be greater than tbody*/
    	overflow&#58; auto;
    	&#125;
    
    table &#123;
    	width&#58; 100%;
    	border&#58; none;
    	background-color&#58; #f7f7f7;
    &#125;
    
    /*
     * Specific Firefox. Only Modern browser are able to interpret > . IE is not a modern browser
     */	
    table>tbody &#123; 
    	overflow&#58; hidden;
    	overflow-x&#58; hidden;
    &#125;
    
    /*
     * Traget is IE5+ only. Only IE is able to interpret this kind of horrible expression Script
     * ----------
     * FOR HEADER
     */
    thead tr &#123;
    	position&#58;relative; 
    	top&#58; expression&#40;offsetParent.scrollTop&#41;;
    &#125;
    
    
    /*
     * Classical Css
     */	
    thead td, thead th &#123;
    	text-align&#58; left;
    	font-size&#58; 14px;
    	background-color&#58; #fdf5e6;
    	color&#58; steelblue;
    	font-weight&#58; bold;
    	border-top&#58; solid 1px #d8d8d8;
    	background-image&#58; url&#40;../images/small.gif&#41;;
    	background-repeat&#58; no-repeat;
    	background-position&#58; right;
    	cursor&#58; pointer;
    	padding-right&#58; 15px;
    &#125;	
    	
    td &#123;
    	color&#58; #000;
    	padding-right&#58; 2px;
    	font-size&#58; 12px;
    	text-align&#58; right;
    	border-bottom&#58; solid 1px #d8d8d8;
    	border-left&#58; solid 1px #d8d8d8;
    	white-space&#58; nowrap;
    &#125;
    
    
    /*
     * FF scroll hide last column.
     * prevent this case
     */
    td&#58;last-child &#123;
    	padding-right&#58; 20px;
    &#125;
    </style>
    
    
    </head>
    
    <body onLoad="onload&#40;&#41;;">
    <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>
    [/code]
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    firemystery
    Gast

    Standard

    *push*

    ich brauch da echt HILFE bitte!?!?

  3. #3
    Interessierte/r
    Registriert seit
    03.05.2007
    Beiträge
    117
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

  4. #4
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  5. #5
    Interessierte/r
    Registriert seit
    03.05.2007
    Beiträge
    117
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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 &#123; 
       background-color&#58; #F7F7F7; 
       width&#58; 100%;      /* table width will be 99% of this*/ 
       height&#58; 100%;    /* must be greater than tbody*/ 
       overflow&#58; auto; 
       &#125;
    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

  6. #6
    firemystery
    Gast

    Standard

    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

  7. #7
    Interessierte/r
    Registriert seit
    03.05.2007
    Beiträge
    117
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  8. #8
    firemystery
    Gast

    Standard

    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

  9. #9
    Interessierte/r
    Registriert seit
    03.05.2007
    Beiträge
    117
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

    mfg

  10. #10
    firemystery
    Gast

    Standard

    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)

Ähnliche Themen

  1. MySQL Werte von Tabelle a in Tabelle b eintragen.
    Von Barret im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 08.02.2007, 11:42
  2. tabelle
    Von davidos_no.1 im Forum HTML & CSS Forum
    Antworten: 26
    Letzter Beitrag: 17.09.2006, 14:22
  3. Tabelle in Tabelle ausrichten
    Von Mad_Dog im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.04.2006, 15:54
  4. Tabelle
    Von davidos_no.1 im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 11.05.2005, 15:31
  5. Wie bekomme ich eine tabelle in eine tabelle?
    Von SonicChriz im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 25.04.2005, 17:06

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •