# DIV an Table größe anpassen



## hoctar (4. Februar 2011)

*DIV an Tabellenbreite anpassen*

Hallo 
folgendes Beispiel:


```
#div {
                margin: 0 auto;
                padding: 4px;
                width: 300px;
                border: 1px solid #ccc;
            }
```


```
<div id="div">

        <table border="1">
            <tr>
                <td>TEXTTEXTTEXTTEXT</td>
                <td>TEXTTEXTTEXTTEXT</td>
                <td>TEXTTEXTTEXTTEXT</td>
            </tr>
            <tr>
                <td>TEXTTEXTTEXTTEXT</td>
                <td>TEXTTEXTTEXTTEXT</td>
                <td>TEXTTEXTTEXTTEXT</td>
            </tr>
        </table>

    </div>
```

Die Tabelle ist breiter als der DIV Kontainer, da der Text diesen Platz ausfühlt.
Gibt es eine Möglichkeit die breite des DIVs, der breite der Tabelle anzupassen, ohne das diese über den DIV Kontainer überläuft?

*EDIT:*

Habe etwas ausprobiert und folgendes ist dabei herausgekommen:


```
#div {
    margin: 0 25%;
    min-width: 50%;
    float: left;
    border: 1px solid red;
}
```

Mit min-width und float wird der DIV Kontainer nun um die Tabelle gewrappt.
Leider ist die Tabelle nun nicht mehr ganz in der Mitte.


----------



## SpiceLab (5. Februar 2011)

Diese zweizeilige Regelergänzung  für die Tabelle im Kontext deinem letzten CSS-Snippet sorgt für ihre horizontale Zentrierung im Viewport des <div>-Elements:


```
div#ID_Name table {
    width:auto;
    margin:auto;
 }
```


----------



## hoctar (6. Februar 2011)

Der Haupt Wrapper soll zentriert werden. Die Tabelle soll sich im #right container auf 100% ausdehnen, was der Fall ist.

Habe etwas weiter experimentiert und dabei ist folgendes heraus gekommen:


```
#wrap, #left, #right {
                        padding: 10px;
                        border: 1px solid red;
                    }

                    #wrap {
                        position: relative;
                        margin: 0 25%;
                        min-width: 50%;

                        float: left;
                    }

                    #left {
                        position: absolute;
                        top: 10px; left: 10px;
                        width: 100px;
                    }

                    #right {
                        margin-left: 120px;
                    }
```


```
<div id="wrap">

                <div id="left">
                    Nav<br>Nav<br>Nav
                </div>

                <div id="right">

                    <table border="1" cellpadding="2" cellspacing="2">
                        <tr>
                            <td>TEXT TEXT TEXT TEXT</td>
                            <td nowrap>TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</td>
                        </tr>
                        <tr>
                            <td>Data 3</td>
                            <td>Data 4</td>
                        </tr>
                    </table>

                </div>

            </div>
```

Die Seite wird durch das Margin nun zentriert, aber nur wenn der Inhalt der Tabelle nicht gößer ist als 25% von margin-right.
Die Tabelle wird auch mit gewrappt.

Folgendes macht mir noch zu schaffen:

Die Zentrierung, trotz langem Inhalt.
Angabe einer maximalen Ausdehnung der Seite. (Habe max-width ausprobiert, leider ohne Erfolg. Anscheinend hat min-width höhere Priorität)


----------



## SpiceLab (7. Februar 2011)

hoctar hat gesagt.:


> Der Haupt Wrapper soll zentriert werden. Die Tabelle soll sich im #right container auf 100% ausdehnen, was der Fall ist.


... aber nur, wenn genügend "TEXT TEXT TEXT ..." enthalten ist - ansonsten dehnt sich die Tabelle derzeit nur soweit aus, wie es ihr Inhalt abverlangt.

Ergo:


```
#right table {
                        width: 100%;
                    }
```

Die Zentrierung von #wrap würde ich so umsetzen:


```
#wrap {
                        position: relative;
                        margin: 0 auto;
                        width: 50%;  
                    }
```

min-width funktioniert übrigens nicht mit der relativen Angabe "%". Zulässig sind hier "px", "em", u.ä.


----------



## hoctar (7. Februar 2011)

Das Problem besteht ja im Inhalt. Dieser ist zu lang und dehnt die Tabelle aus, was soweit gut ist, nur wächst die Tabelle über #wrap hinaus, wenn der Inhalt die Tabelle auf eine größere Breite als die Fensterbreite anwachsen lässt. Deswegen benutze ich min-width. Mit min-width wrappt #wrap die Tabelle.


----------



## SpiceLab (7. Februar 2011)

hoctar hat gesagt.:


> Das Problem besteht ja im Inhalt. Dieser ist zu lang und dehnt die Tabelle aus, was soweit gut ist, nur wächst die Tabelle über #wrap hinaus, wenn der Inhalt die Tabelle auf eine größere Breite als die Fensterbreite anwachsen lässt. Deswegen benutze ich min-width. Mit min-width wrappt #wrap die Tabelle.


Dafür ist min-width überhaupt nicht dienlich ;-)

Stattdessen wird die Tabelle ohne das deklarierte nowrap-Attribut in <td> nicht mehr über den Browser-Viewport hinauswachsen, sondern der übergroße Elementinhalt mittels Zeilenumbrüchen vom Browser kleiner portioniert 


```
<td nowrap>TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</td>
```


----------



## hoctar (7. Februar 2011)

> Dafür ist min-width überhaupt nicht dienlich


Da sich die Tabelle leider nicht genau wie ein normales Block Element verhält, versuche ich es mit einer Art Hack, anders sehe ich leider keine Möglichkeit.

Das nowrap Attribut habe ich hinzugefügt, um ein langes Wort zu simulieren.
Man könnte auch "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXT" einfügen.


----------



## SpiceLab (8. Februar 2011)

hoctar hat gesagt.:


> Da sich die Tabelle leider nicht genau wie ein normales Block Element verhält, versuche ich es mit einer Art Hack, anders sehe ich leider keine Möglichkeit.


Tatsächlich? Und was ist mit dieser Regel?


```
table { display:block; }
```



hoctar hat gesagt.:


> Das nowrap Attribut habe ich hinzugefügt, um ein langes Wort zu simulieren.
> Man könnte auch "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXT" einfügen.


 Dagegen ist  mit CSS kein Kraut gewachsen.


Wörter in der Zeichenkette (String) zählen
Länge der Zeichenkette
Zeichenkette kürzen
Zeilenumbruch nach Zeichenanzahl


----------



## hoctar (8. Februar 2011)

spicelab hat gesagt.:


> Tatsächlich? Und was ist mit dieser Regel?
> 
> 
> ```
> ...



Leider kann ich keine Änderung in der Darstellung festellen.


----------



## SpiceLab (8. Februar 2011)

hoctar hat gesagt.:


> Leider kann ich keine Änderung in der Darstellung festellen.


Dann wohl noch immer mit besagter überlangen Zeichenkette in einer der Tabellenzellen, weil ich weiß im Gegensatz dazu Besseres zu berichten ;-)

Die Möglichkeiten, das Problem des zu großen (Zeilen-)Inhalts aus der Welt zu räumen, hab ich dir heute Morgen genannt - CSS kann die Genannten nicht umsetzen, um "XXL"-Zeichenketten (ohne enthaltende  Leerzeichen) zu kürzen, oder darin Zeilenumbrüche vorzunehmen. Und ein *overflow:hidden* bzw. *overflow-x:hidden* dürfte hier deinen Erwartungen sicherlich nicht genügen.


----------

