html-tabelle formatieren / fixieren

[LanGo]

Guten Tag,

habe folgendes Problem bei einer Tabelle die in etwa wie folgt aufgebaut ist:


<table style="width: 100%">
<tr>
<td class="style1" colspan="4">Überschrift</td>
</tr>
<tr>
<td style="width: 85px">Kategorie</td>
<td style="width: 132px">&lt;input&gt;</td>
<td rowspan="5" style="width: 50px">&nbsp;</td>
<td rowspan="5">Inhalt (Ausgabe aus mysql db via html)</td>
</tr>
<tr>
<td style="width: 85px">Monat</td>
<td style="width: 132px">&lt;input&gt;</td>
</tr>
<tr>
<td style="width: 85px">Jahr</td>
<td style="width: 132px">&lt;input&gt;</td>
</tr>
<tr>
<td style="width: 85px">&nbsp;</td>
<td style="width: 132px">&lt;submit&gt;</td>
</tr>
<tr>
<td style="width: 85px; height: 23px">Suche</td>
<td style="width: 132px; height: 23px">&lt;input&gt;</td>
</tr>
</table>

Das Problem ist, dass die Ausgabe aus der Datenbank immer größer wird und nun die gesamte Tabelle in die länge zieht. Das sieht unschön aus, daher soll der Eingabebereich "Kategorie, Monat, Jahr usw." fixiert werden.

Hoffe mein Problem konnte nachvollzogen werden ;)

Vielen Dank!

MfG Lango

//edit:

Vielleicht hilft diese Ansicht das Problem zu veranschaulichen:
tabelle.php (http://vinceress.dyndns.org/tabelle.php)

[DanMan]

Generell semantisch schlecht, weil du eine Tabelle fürs Layout missbrauchst. Warum also nicht so:

<h1>Überschrift</h1>
<div style="width:30%; float:left">
<label for="kategorie">Kategorie</label>
<input id="kategorie" type="text">
... restliches Formularzeug ...
</div>
<div style="width:65%; float:right">
DB-Ausgabe
</div>

Offensichtlich auch viel leichter zu durchschauen und zu handhaben.

Wenns dann doch sein muss:
<table style="width: 100%">
<caption class="style1">Überschrift</caption>
<tr>
<th style="width: 85px">Kategorie</td>
<td style="width: 132px">&lt;input&gt;</td>
<td rowspan="5" style="width: 50px">&nbsp;</td>
<td rowspan="5" style="overflow:auto;height:400px;">
Inhalt (Ausgabe aus mysql db via html)
</td>
</tr>
<tr>
<th style="width: 85px">Monat</td>
<td style="width: 132px">&lt;input&gt;</td>
</tr>
<tr>
<th style="width: 85px">Jahr</td>
<td style="width: 132px">&lt;input&gt;</td>
</tr>
<tr>
<th style="width: 85px">&nbsp;</td>
<td style="width: 132px">&lt;submit&gt;</td>
</tr>
<tr>
<th style="width: 85px; height: 23px">Suche</td>
<td style="width: 132px; height: 23px">&lt;input&gt;</td>
</tr>
</table>

[LanGo]

Danke, du hast recht.. die Tabellen einfach aneinander vorbei "floaten" zu lassen finde ich auch besser :)

Wie kann ich verhindern, dass Sich die rechte Tabelle unter die linke schiebt wenn der Inhalt zu lang wird?

[Marscel]

Danke, du hast recht.. die Tabellen einfach aneinander vorbei "floaten" zu lassen finde ich auch besser :)

Wie kann ich verhindern, dass Sich die rechte Tabelle unter die linke schiebt wenn der Inhalt zu lang wird?

Ich würds mal mit dem CSS-Attribut max-width für die Tabelle, die nicht wegrutschen soll, versuchen.

[DanMan]

Danke, du hast recht.. die Tabellen einfach aneinander vorbei "floaten" zu lassen finde ich auch besser :)

Wie kann ich verhindern, dass Sich die rechte Tabelle unter die linke schiebt wenn der Inhalt zu lang wird?
Tabelle? Welche Tabelle? Dachte du hast meinen Vorschlag mit den <div> übernommen? Verstehe nicht ganz.

Dass die rechte Seite unter die Linke rutscht wird nicht an der Länge, sondern an der Breite liegen. Wenn die rechte Seite breiter als die 65% der Gesamtbreite wird, dann rutscht sie unter die Linke. Das zu erreichen gibts mehrere Möglichkeiten, und es wäre einfacher für mich was zu empfehlen, wenn ich die Ausgabe mal beispielhaft sehen könnte.

[LanGo]

Eh ja.. sry das ich so lange auf mich warten liess..

Für die Eingabefelder mach ichs einfach so:

<table class="kriterien">

.kriterien {
text-align: left; font-family: Verdana; font-size: x-small;
width: 25%; float: left;
}



Und für die Ausgabe dann:

<table id="top" style="width: 75%" style="float: right">

Hier habe ich die css noch nicht angepasst :(


max-width für das untereinanderschieben der Tabellen funktioniert leider nicht.


Vielleicht hilft das:
http://vinceress.dyndns.org/grafik/ausgabe.jpg

[DanMan]

Vielleicht hilft das:
Ne, ehrlich gesagt hilft das nicht. Kannst du die Seite nicht einfach im Browser mal abspeichern und dann diese statische HTML Seite auf einen Webserver schmeißen? Dann kann man das richtig debuggen.