|
|||
table + caption breite
Hallo Zusammen,
ich möchte, das sich einen Tabelle an der Breite des caption ausrichtet. Die Tabelle soll in der Breite aber nicht festgelegt werden. Meine Überschriften-Texte sind in der Regel immer breiter, als die Tabellen-Inhalte und die Überschrift wird immer umgebrochen. Das möche ich verhindern. Die Breite des caption orientiert sich also an der Tabellenbreite, die sich aus den Inhalten ergibt. Möchte es aber genau umgekehrt. Habe verschiedene Dinge probiert und auch fleissig gegooglt. Bin aber zu keiner zurfridenstellenden Lösung gekommen. Versuche ich da gerade etwas, was gar nciht geht?? Hat wer einen Tipp? Danke Holger |
Sponsored Links |
|
|||
Hallo
Zitat:
Zitat:
Per CSS geht das über die CSS-Angabe white-space: Code:
caption { white-space: nowrap; } Du kannst auch versuchen Zeilenumbrüche mit geschützen Leerzeichen statt der normalen Leerzeichen zu verhindern. Unter Windows kannst du geschützte Leerzeichen erzeugen indem du die Alt-Taste drückst und auf dem Ziffernblock 255 eintippst und dann die Alt-Taste wieder losläßt. Die benutze ich auch um einen Zeilenumbruch zwischen Zahlen und Einheiten (100 kg) zu verhindern. Das fällt mir so auf die schnelle ein. Ansonsten kannst du auch die Suchmaschine deiner Wahl aufrufen und nach "html Zeilenumbruch verhindern" oder "html geschützte Leerzeichen" suchen. Die CSS-Lösung hat den Vorteil, dass sie für schmale Fenster per Media Queries ausgeschaltet werden kann. Bei den geschützten Leerzeichen könnte der Inhalt von Caption etwas uneleganter doppelt eingetragen werden und der jeweils nicht gewünschte ausgeblendet werden. Nachtrag: white-space funktioniert auch im Internet Explorer und kann deshalb problemlos verwendet werden. Ich hatte mich durch "Can I Use" täuschen lassen. Gruss MrMurphy Geändert von MrMurphy (04.06.2016 um 15:07 Uhr) |
Sponsored Links |
|
|||
Hallo MrMurphy,
vielen Dank für schnelle und ausführliche Antwort. Das hatte ich fast befürchtet. Das mit dem Zeilenumbruch verhindern ist eine super Idee, da hätt ich ja mal auch selber drauf kommen können. War wohl ein wenig zusehr auf einen anderen Lösungweg fixiert. Werde das umgehend austesten und dann Bericht erstatten. Vielen Dank ! |
|
|||
Hallo
Ich habe auch noch mal etwas rumprobiert. Der Zeilenumbruch kann mit white-space oder geschützten Leerzeichen verhindert werden, auch im IE. Trotzdem zickt der IE am meisten rum. Aber auch der Firefox macht Probleme. Obwohl sich das caption-Element im table-Element befindet scheinen es der IE und der Firefox teilweise unabhängig davon anzuzeigen. Mit dem caption-Element habe ich deshalb keine Lösung gefunden, die in allen vier Browsern funktioniert. Deshalb würde ich folgendermaßen vorgehen: Zunächst wird ein umgebendes Element erstellt. In meinem Fall section, aber es kann auch jedes andere passende verwendet werden, wie beispielsweise div. Dieses Element wird mit display-inline angezeigt. Als erstes steht in ihm ein p-Element mit dem Inhalt des ehemaligen caption-Elements. Beim p-Element werden Zeilenumbrüche mittels white-space: nowrap verhindert. So kann bei schmalen Fensterbreiten mittels Media Queries der Zeilenumbruch doch zugelassen werden. margin-bottom wird auf 0 gesetzt, damit zwischen p und table kein unerwünschter Abstand entsteht. Das p-Element steht also vor dem table-Element. Danach folgt die Tabelle ohne caption und einer Breite (width) von 100%. Meine Beispieldatei, damit meine Versuche direkt in unterschiedlichen Browsern getestet werden können, wobei ich auf Media Queries verzichtet habe: Tabellenlayout 01 Gruss MrMurphy |
|
|||
WOW!
Vielen Dank für die massive Mühe!! Hatte es zwischenzeitlich auch schon mit nowrap und geschütztem Leerzeichen probiert und bin da zum selben Ergebnis gekommen Die Tabelle wächst nicht mit. Gedanklich hatte ich auch schon mit einem Lösungansatz gespielt, bei dem die Tabelle in einem übergeordnetem Element enthalten ist, und das catpion durch ein anders Text-Element zu ersetzen. War da aber wegen der SEO und den verschiedenen Browsern nicht sicher, wie. Bin aber lange nich soweit vorgedrungen, wie Du. Super Arbeit. Werde Deinen Lösungsweg einmal mit einer inline-Überschrift testen, und dann selbstverständlich wieder Bericht erstatten. Gegebenenfalls kann ich das nowrap in den mediaquerys ja wieder zurücksetzen. Nochmals herzlichen Dank für die Umfang - und Detailreiche Arbeit, die Du Dir gemacht hast! Sonnige Tage Holger |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Myspace Fehler zwischen FF und IE? | soren.designs | (X)HTML | 1 | 05.09.2009 17:02 |
Außenabstand: Problem bei TABLE und CAPTION | AndreasB | CSS | 2 | 23.05.2009 10:59 |
Myspace problem... Rechte Säule verschiebt sich im IE. | calledmarcel | CSS | 1 | 27.02.2009 10:12 |
Falsche Darstellung im Internet Explorer | Janizzle | CSS | 0 | 30.08.2007 20:44 |
table tag mir echten 100% breite | THePointer | CSS | 3 | 10.04.2007 17:04 |