<tbody > Problem mit Mozilla Firefox

Romsl

Hi,

es gibt folgendes Problem. Ich habe eine Tabelle die noch eine Tabelle beinhaltet. Die äußerste Tabelle hat 100% Höhe.

HTML-Code:

Code

<table height="100%">


</table>

Die innere Tabelle beinhaltet

HTML-Code:

Code

<thead>
  <tr>
    <th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col4</th><th>Col 5</th>
  </tr>
</thead>
<tbody style="overflow:auto; height:100%; ">   
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
  </tr>   
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
  </tr> ........ 
</tbody>

Alles anzeigen

Das Problem hierbei ist, dass ich unten (in der äußeren Tabelle) noch eine NavLeiste habe. Ich möchte jetzt, dass die äußerste Tabelle 100% hat und die innere genau die 100% von der äußeren einnimmt, und falls mehr Datensätze (Zeilen) vorhanden sind eben diese innere gescrollt werden kann.

Das heißt ich habe im Endeffekt auf der Seite eine Tabelle die den restlichen Bildschirminhalt einnimmt und innerhalb eine Scrollable Tabelle.

Danke

Edit: BESSER?

phore

kann dir leider nicht helfen aber benutze bitte die [code] tags für code abschnitte...thx

nuessler

Du kannst es mit iframes versuchen. Ich glaube, dort kann man die Grösse in % einstellen.
MfG

Romsl

Das Problem ist, dass ich an einem Projekt mitarbeite und das Template für die innere Tabelle schon besteht.

nuessler

Ich bin gerade verwirrt :)! Auch wenn die innere Tabelle schon besteht, kannst du mit iFrames arbeiten... Das Tag geht so:

Code

<iframe src="NAME.html" name="FRAME" width="100%" height="100%"></iframe>

Ich weis nicht ob es das ist, was du suchst... Probiers doch aus...

topfblume

Moin ...

Code

height ist in <table> nicht erlaubt.

Code

<thead> <tfoot> <tbody> und nicht <thead> <tbody>

Es ist zwar ohne Quelltext nicht ganz nachzuvollziehen, was genau Du eigentlich möchtest, aber wenn sich nur der <tbody> scrollen lassen sollte, dann müsstest Du es ohne diese Angaben lösen.

Wenn aber die gesamte innere Tabelle gescrollt werden soll, dann setzt diese in ein <div> und gebe dem die <style> Eigenschaften.

Gruß

nuessler

Stimmt das? Ich habe bei meinen Tabellen immer mit "height" gearbeitet. Es funktionierte soweit immer...

topfblume

MOIN ...

HTML

<html>
<head>
<title>height in einem table</title>
</head>
<body>
<table width="100% height="100%" border="1">
<tr>
<td>TEXT</td>
<td>TEXT</td>
</tr>
</table>
</body>
</html>

Alles anzeigen

Schau Dir das Ergebnis im Browser an mit und ohne height-Angabe.
Die Tabelle ist nur so hoch wie der Inhalt es vorgibt.

Gruß

nuessler

Dann musst du halt den Rand der Seite rausnehmen!
z.B:

Code

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<form method="post" name="bp" action="">
    <table style="overflow:auto; height: 100%; ">
    	<tbody style="overflow:auto; height: 100%; ">
	    <tr>
	    	<td>
		    <table border="0" cellpadding="0" cellspacing="0" height="100%">
		        <thead>
		            <tr>
		                <th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col4</th><th>Col 5</th>
		            </tr>
		        </thead>
		        <tfoot>

		        </tfoot>
		        <tbody style="overflow:auto; max-height:100%; ">
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
		            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>		
			</tbody>
		    </table>
	    	</td>
	    </tr>
	</tbody>
</table>
</form>
Leiste
</body>
</html>

Alles anzeigen

MOZILLA FIREFOX.

So sollte es aussehen. In der inneren Tabelle (erzeugt durch Template) ist ein Header angegeben. Das Problem ist jetzt, dass ich den Header aber nicht mitscrollen möchte, sondern er soll oben stehen bleiben. Gibt es eine Möglichkeit dies zu realisieren ohne das Template zu ändern, oder das Template zu ändern ohne Auswirkungen auf bestehende Komponenten zu haben?

Gruß

Romsl

topfblume

Moin ...

Auch diese Angaben gehörten nie zum HTML-Standard, ganau wie das height im <table>.

Ich schreibe das auch nur, weil sich hier im Forum viele Anfänger aufhalten, die html erlernen möchten und die sollten es dann gleich richtig machen.
Ja, ich weiss, das bis jetzt noch fast jeder Browser diese Angaben unterstützt.
Alle die es richtig erlernen möchten, sollten sich auf jeden Fall mit css beschäftigen.

In diesem Beispiel würde es dann:

Code

body
      {
       margin:0px;
       }

heißen

Gruß

phore

Zitat von nuessler
Dann musst du halt den Rand der Seite rausnehmen!
z.B:
Code
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

geht doch nur im IE?

Im IE gibts einen Hack dafür, aber im FIREFOX und Konsorten wills nicht gehen. Da muss es doch etwas geben!?!

Code

<STYLE type="text/css" media="screen">
    #container
    {
        border: solid 1px black;
        width: 50%;
        height: 150px;
        overflow: auto;
    }
    .noScroll
    {
        position:relative;
        top:expression(this.offsetParent.scrollTop); 
        background-color:white;
        font-family: Arial, Helvetica, sans-serif;
    }
    TH
    {
        text-align: left;
    }
</STYLE>
<div id="container">
    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
        <thead>
            <tr class="noScroll">
                <TH>Col 1</TH><TH>Col 2</TH><TH>Col 3</TH><TH>Col 4</TH><TH>Col 5</TH>
            </tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        </tbody>
    </TABLE>
</div>

Alles anzeigen

nuessler

Zitat von ph0re

geht doch nur im IE?

Klar geht das! Ich habs bei meiner Seite auch mit margine gemacht und sie funzt im Firefox.

phore

ja aber nur im stylesheet - im body gehts nicht..

Hab leider immernoch keine Lösung für mein Problem. Iframe kann ich nicht verwenden. Es wäre gut wenn es evtl so ein script wie oben für Mozilla und Co gibt.

Tags