Sehr breite Tabelle (table) in der Breite begrenzen und Scrollbalken anzeigen

Marcus Gräfe · 18. Februar 2013, 18:49

Ich habe eine HTML-Seite mit drei Tabellen (ganz klassisch mit "table"). Die drei Tabellen haben jeweils eine Breite von 98%. Die oberste und die unterste sind vom Inhalt her recht schmal, die mittlere hingegen kann u. U. sehr breit werden. Der Inhalt ist dynamisch. Sie besteht aus 5 bis 100 Spalten, die jeweils Daten enthalten.

Das sieht also so aus:

HTML-Quellcode

<table width="98%">Wenig Inhalt #1</table>
<table width="98%">VIIIIIIIIIIIIIIIEL Inhalt</table>
<table width="98%">Wenig Inhalt #2</table>

Nun überlege ich, wie ich dafür sorgen kann, dass die beiden oberen komplett sichtbar sind und man nur für die mittlere (horizontal) scrollen muss. Das 1. Problem scheint zu sein, dass sich die 98% auf die Dokumentenbreite zu beziehen scheint, nicht auf die Fensterbreite. Da die mittlere Tabelle recht breit ist, sind 98% deutlich mehr als der sichtbare Bereich.

Das 2. Problem ist die Minimalbreite der 1. und 3. Tabelle. Während die ohne die mittlere Tabelle bei einer kleinen (Pixel-) Zahl liegt, ist sie mit der mittleren Tabelle deutlich höher. D. h. wenn ich das Fenster in der Breite verkleinere, so schiebt sich der rechte Bereich der Tabellen nicht besonders weit nach links.

Zwei Lösungsmöglichkeiten fallen mir ein:

1.) iframe. Fände ich aber unschön, dann muss ich mein PHP-Skript, welches die Daten generiert, umprogrammieren.
2.) Layer (Div). Habe bisher aber noch keine gute Möglichkeit gefunden. Das Problem ist bisher auch da, dass die 1. und 3. Tabelle eine viel höhere Minimalbreite haben und man müsste für den Scrollbalken des Divs erst nach unten scrollen (Fenster-Scrollbalken) und meist erscheint auch noch der horizontale Fenster-Scrollbalken zusätzlich zum Div-Scollbalken.

Die Frage ist: Wie ist die beste Methode und falls man es mit einem Div am besten realisiert, was muss ich da machen? Bisher habe ich beim Div mit width und overflow experimentiert.

BjöNi · 18. Februar 2013, 18:57

HTML-Quellcode

<table style="position: fixed;">Wenig Inhalt #1</table>
<table width="98%">VIIIIIIIIIIIIIIIEL Inhalt</table>
<table style="position: fixed;">Wenig Inhalt #2</table>

Habs jetzt nicht probiert, sollte aber vom Prinzip her klappen.

//EDIT: Sry, genau vertauscht. Edited.

Mangafreak1995 · 18. Februar 2013, 18:59

width und overflow ist auch ein guter Anfang
vielleicht füllst du die Tabelle mal mit zulässigen Werten:

HTML-Quellcode

<table>
<tr><td>Das soll man sehen</td></tr>
</table>

Marcus Gräfe · 18. Februar 2013, 19:07

@BjöNi: Aber wie breit sind dann die Tabellen, die du auf "fixed" gesetzt hast? Wenn's schön aussehen soll, so müssten die 98% der Fensterbreite ausfüllen.

@Mangafreak1995: Hilft mir jetzt nicht wirklich weiter.

Samus Aran · 18. Februar 2013, 19:14

Nutz CSS, nicht die obsoleten Attribute.
Soll das auch mit antiken Browsern kompatibel sein oder kannst du auch zeitgemäße Techniken verwenden?
Vllt. hilft dir das: jsbin.com/uxecel/4/edit

Marcus Gräfe · 18. Februar 2013, 19:23

Streng genommen muss das sogar ausschließlich im neuesten Firefox laufen. Ist eine Intranet-Anwendung. Da die Anwendung aber auf dem Woltlab Burning Board 1.x aufbaut, ist alles maximal HTML 4.0. Was nicht heißt, dass ich nichts auf modernes CSS umstellen kann. Die Tabellen sollten aber "table" bleiben, denn da wäre eine Umstellung viel zu aufwendig.

Nachtrag: Der Link sieht schon ganz gut aus, teste ich morgen.

BjöNi · 18. Februar 2013, 19:29

So, habs jetzt mal so gemacht:

HTML-Quellcode

<html><head><title>test</title></head><body>
<div><table style="position: fixed; width: 98%; top: 0px;"><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr></table></div>
<table style="min-width: 98%; position: absolute; top: 100px;"><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr></table>
<div><table style="position: fixed; width: 98%; top: 200px;"><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr></table></div>
</body></html>

In Post #2 hab ich nicht aufgepasst, da war sowohl Orginal als auch Edit falsch.

//EDIT: Hier nochmal als JS Bin.

Mangafreak1995 · 18. Februar 2013, 20:06

Samus Aran schrieb:

Vllt. hilft dir das: jsbin.com/uxecel/4/edit

Marcus Gräfe schrieb:

@Mangafreak1995: Hilft mir jetzt nicht wirklich weiter.

Ich wollte nur sagen, dass du schon den richtigen Ansatz hattest: siehe Samus Post. Die Anmerkungen mit der Tabelle war nur ne Vermutung, warum es evtl. nicht klappt.

Marcus Gräfe · 19. Februar 2013, 08:29

Ich habe nun versucht, eure Tipps anzuwenden. Grundsätzlich ist das wohl die richtige Richtung. Leider musste ich feststellen, dass ich euch wohl einige Sachen verschwiegen habe, die wichtig sind.

Erstmal ein Screenshot der Seite:

Das Problem ist, die Seite enthält noch mehr als nur die drei Tabellen. Wenn ich die obere und untere Tabelle "fixed" mache (die übrigens identisch sind und aus einem Template kommen), so sind eben nur diese unbeweglich, der gesamte Header der Seite (die ganze Seite ist ein Konstrukt aus Tabellen) bewegt sich mit. Ich kann aber streng genommen nur alles unter dem Header bearbeiten (also meine drei Tabellen). Der Rest ist Bestandteil der Standard-Templates des WBB-Forums. Wenn ich da auch was ändern würde, so könnte es Probleme an anderen Stellen geben (es gibt schon unzählige Unterseiten, die diese Templates verwenden).

Sollte ich dann doch besser zum iframe greifen?

Marcus Gräfe · 19. Februar 2013, 14:09

Ich hab's gelöst!

Habe es nun mit Javascript und jQuery gemacht. Und zwar wie folgt:

- 1. und 3. Tabelle (die Navigation): Keine Änderung.

- Zwischen Navigation 1 und 2 ein leeres Div:

HTML-Quellcode

$navigation1<br>
<div id="tablespace">
 
</div>
<br>$navigation2

- Datentabelle ganz außerhalb der anderen Tabellen, direkt vor "</body>":

HTML-Quellcode

<table cellpadding=4 cellspacing=1 border=0 bgcolor="{tableinbordercolor}" width="{tableinwidth}" id="tablecontent" style="position:absolute;">
$spalten_header
$daten
$spalten_header
</table>

- Javascript am Ende der Seite:

JavaScript-Quellcode

$(window).resize ( function () {
var t = $('#navigation1').offset().top;
var l = $('#navigation1').offset().left;
var h = $('#navigation1').height();
$('#tablecontent').css('top', t+h+16);
$('#tablecontent').css('left', l);
var h2 = $('#tablecontent').height();
$('#tablespace').height(h2);
});
$(window).resize();

Vielen Dank an alle!

bastimw · 20. Februar 2013, 08:37

du kannst das im Normalfall alles mit divs machen -> auch Seitennavigation wird über Php und div´s gemacht!

- (iframes + frames nutzt man eigentlich nicht)
- javascript kann evtl ausgeschalten sein beim Endnutzer, damit ist die Seite nicht Anwenderfreundlich, weil sie niht überall gleich ist und in deinem Fall nicht überall funktioniert.

Naviagtion über php -- cramerz.com/php/php_include (zb)

Samus Aran · 20. Februar 2013, 13:28

auch Seitennavigation wird über Php und div´s gemacht!

Du hast keine Ahnung, wovon du redest, bitte verschwinde aus diesem Thread.

(iframes + frames nutzt man eigentlich nicht)

Frames haben mit IFrames nichts zu tun.

javascript kann evtl ausgeschalten sein beim Endnutzer

1999 hat angerufen und will seinen Bullshit zurück.

Naviagtion über php -- cramerz.com/php/php_include

Nein.

Sehr breite Tabelle (table) in der Breite begrenzen und Scrollbalken anzeigen

Sehr breite Tabelle (table) in der Breite begrenzen und Scrollbalken anzeigen

HTML-Quellcode

HTML-Quellcode

HTML-Quellcode

HTML-Quellcode

Samus Aran schrieb:

Marcus Gräfe schrieb:

HTML-Quellcode

HTML-Quellcode

JavaScript-Quellcode

Tags

Ähnliche Themen

4 Benutzer haben hier geschrieben