nicht angemeldet
Firefox - Tabelle breiter als <tbody>
Gunnar BittersmannHallo liebe Gemeinde,
ich habe ein mir unverständliches Problem, für dessen Lösung ich etwas Hilfe gebrauchen könnte:
Auf meiner Seite befindet sich zentral ein <div>-Bereich mit fester Breite. In diesem <div>-Bereich werden verschiedene, kleine Tabellen zunächst untereinander angezeigt (die werden dynamisch generiert). Die einzelnen Tabellen kann man verschieben, um die Darstellung z.B. für einen Ausdruck je nach Wunsch anzuordnen.
Soweit funktioniert das einwandfrei.
Das Problem ist, dass die Tabellenbreite im Firefox immer 100% (zum Parent-<div>-Bereich) beträgt. An sich ist jede Tabelle nur so breit, wie sie für den Inhalt sein muss. Wenn ich aber eine Tabelle auch nur 1px nach rechts verschiebe, erscheint im <div>-Bereich ein horizontaler Scrollbalken, obwohl zwischen Tabelle (bzw. dem rechten Tabellenrahmen) und <div>-Bereich noch jede Menge Platz ist.
Ich habe mir das im DOM Inspector angeschaut. Eigenartiger Weise hat dort jede Tabelle den Bereich bis ganz nach rechts "reserviert" (wird rot umrahmnt beim anklicken im Dokumenten-Baum). Der <tbody> im DOM Inspector ist aber nur so breit, wie die Tabelle auch dargestellt wird.
Dies ist nicht nur bei mir so, sondern auch auf allen anderen Seiten mit Tabellen (hab mir das auf anderen Seiten angeschaut).
Wenn ich die Positionierung der Tabellen auf "position:absolute" setze, wird die Breite im DOM Inspector korrekt angezeigt. Dann erscheint ein Scrollbalken auch erst, wenn man die Tabelle über den Fensterrand erschiebt.
Was ist da los bzw. wieso "denkt" Firefox, dass die Tabelle breiter ist, als sie angezeigt wird?
Vielen Dank.
MfG
mutzel6
-
@@mutzel6:
Ich habe mir das im DOM Inspector angeschaut.
Ich würde mir das auch gern anschauen, nur wie?
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
@@mutzel6:
Ich habe mir das im DOM Inspector angeschaut.
Ich würde mir das auch gern anschauen, nur wie?
Live long and prosper,
Gunnarkuckst Du hier:
http://de.selfhtml.org/html/tabellen/anzeige/table_tr_th_td.htm... ist einfach eine beliebige Tabelle. Wenn man im DOM Inspector-Baum das <table>-Element anklickt, wird ein Bereich vom linken Rand der Tabelle bis zum rechten Fensterrand umrahmt. Das <tbody>-Element ist nur so groß wie es sich gehört.
Ich hänge mal den Quelltext für eben diese Seite an + mein JavaScript + die Ergänzung in <table>. Der Effekt ist genau wie bei mir: es erscheint sofort ein Scrollbalken, auch wenn rechts noch jede Menge Platz ist.
Ich kann hier keinen Link zu meiner Seite anbringen, da die Seite auf einem firmeninternen Server liegt und der Quelltext ist über 1000 Zeilen lang ... aber das Prinzip bzw. das Problem ist das gleiche.
----------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Aufbau einer Tabelle - table, tr, th, td, border</title>
<script type="text/javascript">
//Tabellen bewegen
drag = 'inaktiv';
aktivX = 0; aktivY = 0; aktivTab = null; aktivZindex = 1000;
function init() {
tabellen = document.getElementsByName('result');
for (i=0; i<tabellen.length; i++) { tabellen[i].onmousedown = mdown; }
if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
document.onmouseup = mup;
document.onmousemove = mmove;
}
window.onload = init;
function mdown(e){
aktivTab = this;
aktivTab.style.zIndex = aktivZindex++;
drag = 'aktiv';
aktivX = (e)?e.pageX:event.clientX + document.body.scrollLeft;
aktivY = (e)?e.pageY :event.clientY + document.body.scrollTop;
return false;
}
function mmove(e){
if (drag == "inaktiv") return;
var neuX = (e) ? e.pageX:event.clientX + document.body.scrollLeft;
var neuY = (e) ? e.pageY:event.clientY + document.body.scrollTop;
var distX = (neuX-aktivX);
var distY = (neuY-aktivY);
aktivX = neuX;
aktivY = neuY;
aktivTab.style.left = parseInt(aktivTab.style.left) + distX + 'px';
aktivTab.style.top = parseInt(aktivTab.style.top) + distY + 'px';
}
function mup(e){
drag = "inaktiv";
}
</script>
</head>
<body><h1>Tabelle mit Gitternetzlinien</h1>
<table border="1" name="result" style="position:relative;left:0px;top:0px">
<tr style="cursor:pointer">
<th>Berlin</th>
<th>Hamburg</th>
<th>München</th>
</tr>
<tr>
<td>Miljöh</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr>
<tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table><h1>Tabelle ohne Gitternetzlinien (blinde Tabelle)</h1>
<table border="0">
<tr>
<td><h2>ARQ</h2></td>
<td><p>Automatic Repeat Request. Eine allgemeine Bezeichnung für Fehlerprotokolle, die
Übertragungsfehler erkennt und defekte Blöcke selbständig wiederholt</p></td>
</tr>
<tr>
<td><h2>HDLC</h2></td>
<td><p>High Level Data Link Control. Ein Standard-Protokoll, das von der Kommission für
internationale Standards für Softwareanwendungen in synchronen Anlagen verwendet wird.</p></td>
</tr>
</table><p><a href="../aufbau.htm#definieren">zurück</a></p>
</body>
</html>
-