Tabellenspalte automatisch erweitern?

[topf]

Hallo,

ich sitze leider schon seit Stunden an einer Formatierung für eine Tabellendarstellung und komme nicht weiter.

Ich möchte beliebig viele <div>-Container innerhalb einer Tabellenspalte nebeneinander darstellen, sodass diese unabhängig von der Browserfenster-Größe aber niemals umgebrochen werden, also untereinander abgebildet werden.

Ich bin wirklich für jede Hilfe dankbar.

<table border="1" >
	<tr>
     	<td valign="top">
	</td>
	<td  valign="top" >
               <div style="float:left"></div><div style="float:left"></div><div style="float:left"></div><div style="float:left"></div><div style="float:left"></div><!--- usw.. !>
</td>
	</tr>
</table>

 

[Maik]

Hi,

formatier hierfür die umschliessende Tabellenzelle wie folgt:

<td class="wrapper">

td.wrapper {
width:100%;
white-space:nowrap;
vertical-align:top;
}

und wandel die float:left-Deklaration für die DIV-Blöcke in display:inline um.

mfg Maik

 

[topf]

Hi Maik,

danke für deine spontane Hilfe.

Jetzt werden alle div-Container untereinander ausgegeben.

Grüße Lars

 

[Maik]

Kann ich mit meinem Vorschlag bei mir nicht registrieren (die Boxen reichen in meiner Testseite bis Nr.45):



Hast du evtl. display:block anstelle von display:inline angegeben?

mfg Maik

 

[topf]

Hi,
ich habe herausgefunden, dass es daran liegt, dass ich innerhalb des <div> wieder eine <table> habe.

Sorry, dass ich vermutlich wichtige Informationen zurückgehalten habe. Gibt es dafür auch eine Hilfe ?

Grüße und nochmals vielen Dank

 

[Maik]

Das <table>-Element zählt zur Familie der Block-Elemente, die im Textfluß automatisch einen Absatz erzeugen.

Folglich lautet hier die Lösung:

td.wrapper div table {
display:inline; /* "inline" erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt. */
}

mfg Maik

 

[topf]

SUPER!

Damit komm ich weiter.
Jetzt muss ich nurnoch die Rahmen mit CSS gestalten, weil der Firefox irgendeinen seltsamen Mist mit aus der Standard-Border macht ( siehe Anhang ).

Aber Riesendank nochmal.

Ich wünsche noch einen schönen Sonntag!

 

[Maik]

Die modernen bzw. aktuellen Browsergenerationen (FF3.5.x, IE8, Opera10.10, Safari, usw.) interpretieren den display-Wert inline-block gemäß der CSS-Spezifikation:

inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss

mit dem FF den Tabellenrahmen auch korrekt anzeigt:

td.wrapper div table {
display:inline-block;
}

Ältere Browserversionen, wie z.B. FF2.x, IE6 u. IE7, behandeln das so formatierte Element als reines Block-Element, das den unerwünschten Absatz im Textfluß erzeugt.

mfg Maik