• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellenbreite soll fixiert bleiben.

Status
Für weitere Antworten geschlossen.

wax

Neues Mitglied
Hallo liebes Forum. :)

Ich habe nur eine kurze Frage an euch. Wenn ich einer Tabelle per Style-Angabe sage, dass sie nur 80% des Browserfensters einnehmen soll und ihr dann aber ein langen Text innerhalb eines <span>-Elementes übergebe, wird die Tabelle dann einfach erweitert oder sollte das nicht geschehen?

Also einmal die Tabelle:
Code:
<table style="width:80%">.....

und als Inhalt eines <td>-Elementes übergebe ich einen langen Text innerhalb eines Span-Elementes. Nun soll, dieser Text aber nicht die Tabelle erweitern, so wie er es benötigt, sondern sobald der Text an die 80%-Grenze der Tabelle stößt, soll der Text in der nächsten Zeile weiter angezeigt werden. Hoffe ihr versteht was ich meine? Liegt dieses Verhalten am <span>?

MfG
wax
 
probiers mal mit css:

Code:
table {
width: 80%;
max-width:80%;
}


obwohl die breite sich egtl schon mit width: 80% nich verziehen sollte, außer jmd hat ne höhere auflösung.
 
Es ist zum Mäuse melken...
Hier mal meine Seite:

Code:
[SIZE=2][COLOR=#0000ff]<![/COLOR][/SIZE][SIZE=2][COLOR=#800000]DOCTYPE [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]html[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]PUBLIC[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]"-//W3C//DTD XHTML 1.0 Transitional//EN"[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]html [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]xmlns[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="http://www.w3.org/1999/xhtml"[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]head[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]title[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE][SIZE=2]Untitled Page[/SIZE][SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]title[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]head[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]body[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]table [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="width:80%; max-width:80% ;border-style:ridge">[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]colgroup[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]col [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="width:100px; background-color:#DADADA"[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]/>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]col[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]/>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]colgroup[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]tr[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]td [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]rowspan[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="100%" [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text-align:center; vertical-align:top">[/COLOR][/SIZE][SIZE=2]fester Bereich :([/SIZE][SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]td[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]td[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]table [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="border-style:ridge">[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]thead[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]tr[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]th [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text-align:center; background-color:#FFFFCC; width:10%; border-bottom-style:ridge; border-right-style:ridge; border-left-style:ridge">[/COLOR][/SIZE][SIZE=2]Schritt[/SIZE][SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]th[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]th [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text-align:center; background-color:#FFFFCC; border-bottom-style:ridge">[/COLOR][/SIZE][SIZE=2]Beschreibung[/SIZE][SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]th[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]tr[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]thead[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]tbody[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]tr[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]td [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text-align:center; border-right-style:ridge; border-left-style:ridge; font-size:1em; font-weight:bold">[/COLOR][/SIZE][SIZE=2]1[/SIZE][SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]td[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]td[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]p [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]align[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="Left">[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text-decoration:none;font-weight:normal;font-style:normal;font-size:12pt">[/COLOR][/SIZE][SIZE=2]AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA[/SIZE][SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]span[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]p[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]td[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]tr[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]tbody[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]table[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]td[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]tr[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]table[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]body[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]html[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]

Wieso wird die Tabelle soweit aufgespannt wie der Text es benötigt? Ich möchte links und rechts eine ABSOLUT feste Breite haben, die durch nichts verändert wird.

MfG
wax

ps: ich hoffe der Code wird bei euch auch mehrzeilig angezeigt. *schäm*

Ok durch Forschung hier im Forum wurde mir bewusst, dass Text, der keine Leerzeichen enthält, niemals umgebrochen wird. So weit so gut.....
Dann habe ich aber eine Frage zu meiner linken Spalte, die niemanls ihre Größe verändern soll. Kann ich da echt nichts machen und einfach sage "egal was rechts von dir kommt, behalte deine Breite" ?

MfG
wax
 
Zuletzt bearbeitet von einem Moderator:
Dann habe ich aber eine Frage zu meiner linken Spalte, die niemanls ihre Größe verändern soll. Kann ich da echt nichts machen und einfach sage "egal was rechts von dir kommt, behalte deine Breite" ?
doch, du kannst der Spalte eine feste Breite geben durch ein width-Attribut, wie schon in deinem table-Tag.

Code:
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]td [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]rowspan[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="100%" [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]style[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text-align:center; vertical-align:top" width="50px">[/COLOR][/SIZE][SIZE=2]fester Bereich :([/SIZE][SIZE=2][COLOR=#0000ff]</[/COLOR][/SIZE][SIZE=2][COLOR=#800000]td[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
 
Danke für die Hilfe!
Ich habe es nun hinbekommen. Mein Problem war einfach das ich an manchen Stellen absoulte Werte und an anderen relative verwendet habe. Das geht in maanchen Fällen klar, in manchen kann es aber auch zu einem unerwünschten Verhalten führen. :wink:

MfG
wax
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben