✔ Div um Tabelle

[Geflügel]

Hallo,
probiere schon seit Ewigkeiten rum, wie ich ein Div so einstellen kann, dass es sich der Tabelle anpasst, die es trägt!? Hat jemand eine Idee? Danke im Voraus!

 

[Dörti.Hermi]

Hallo!

Normalerweise passt sich das div automatisch dessen Inhalt an, solange du die maße nicht direkt festgelegt hast!

Also so z.B:

<div>
 <table>Oder was auch immer</table>
</div>

Wenn du aber so was machst:

<div style="width: 60px; height: 50px">....</div>

dann wird das div immer die selben Ausmaße annehmen, egal was drin ist..

Lg

 

[Maik]

Hi,

das ist ja eine sehr schwammige Aussage, denn normalerweise nimmt das umschliessende DIV automatisch die Höhe des eingebundenen Inhalts an.

Wie lautet denn der dazugehörige Quellcode?

 

[Dörti.Hermi]

Hi Maik,
also falls du damit das >> style="...height:50px" << gemeint hast - war nur ein beispiel. schon klar dass die höhe dann automatisch angepasst wird

Lg

 

[Maik]

@Hermi90: Ich hab dich doch gar nicht angesprochen bzw. gemeint. :suspekt:

 

[Dörti.Hermi]

achso, na dann is alles klar!

 

[Geflügel]

<div style="border: 1px solid red;>
	<table border="1" cellpadding="2" cellspacing="2">
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
		</tr>
		<tr>
			<td>Data 3</td>
			<td>Data 4</td>
		</tr>
	</table>
</div>

Die Breite des DIVs soll sich automatisch der Breite der Tabelle anpassen.

Wenn ich dem DIV noch

display: inline;

mit auf den Weg gebe, dann haut's das DIV-Element vollkommen an den Rand.

Wie stelle ich es also richtig an? Vielen Dank im Voraus. -)

 

[Maik]

Da das DIV ein Blockelement ist, richtet sich seine Breite nach dem übergeordneten und nicht nach dem eingebundenen Element.

Abhilfe schafft da eine absolute Positionierung:

<div style="border: 1px solid red;position:absolute;">
     <table border="1" cellpadding="2" cellspacing="2">
                <tr>
                        <td>Data 1</td>
                        <td>Data 2</td>
                </tr>
                <tr>
                        <td>Data 3</td>
                        <td>Data 4</td>
                </tr>
     </table>
</div>

Oder die Herausnahme des Blockelements aus dem normalen Textfluß mittels einer float-Deklaration:

<div style="border: 1px solid red;float:left;">
     <table border="1" cellpadding="2" cellspacing="2">
                <tr>
                        <td>Data 1</td>
                        <td>Data 2</td>
                </tr>
                <tr>
                        <td>Data 3</td>
                        <td>Data 4</td>
                </tr>
     </table>
</div>

 

[Geflügel]

Geil, das t! Danke -)

 

[Maik]

Geil, das t! Danke -)

Dann markiere ein "gelöstes" Thema bitte zukünftig auch selbstständig als erledigt und vermeide hier im Forum die Kurzform "f-u-n-z-t" von funktionieren, da diese vom Filtersystem ausradiert wird, und nur das verstümmelte "t" übrig bleibt. Vielen Dank.