DIV an Table größe anpassen

hoctar

Erfahrenes Mitglied
DIV an Tabellenbreite anpassen

Hallo :)
folgendes Beispiel:

CSS:
            #div {
                margin: 0 auto;
                padding: 4px;
                width: 300px;
                border: 1px solid #ccc;
            }
HTML:
    <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:

CSS:
#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.
 
Zuletzt bearbeitet:
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:

CSS:
div#ID_Name table {
    width:auto;
    margin:auto;
 }
 
Zuletzt bearbeitet:
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:

CSS:
                    #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;
                    }

HTML:
            <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)
 
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:

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

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

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

min-width funktioniert übrigens nicht mit der relativen Angabe "%". Zulässig sind hier "px", "em", u.ä.
 
Zuletzt bearbeitet:
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.
 
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 :D

HTML:
<td nowrap>TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</td>
 
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.
 
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?

CSS:
table { display:block; }
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.

  1. Wörter in der Zeichenkette (String) zählen
  2. Länge der Zeichenkette
  3. Zeichenkette kürzen
  4. Zeilenumbruch nach Zeichenanzahl
 
Zuletzt bearbeitet:
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.
 
Zuletzt bearbeitet:
Zurück