zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden table + caption breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.06.2016, 13:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2014
Beiträge: 5
Homero befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.06.2016, 14:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Versuche ich da gerade etwas, was gar nciht geht??
Richtig. Die Tabellenbreite kann sich nicht nach der Inhaltsbreite des caption-Elements richten.

Zitat:
die Überschrift wird immer umgebrochen
Das könntest du verhindern.

Per CSS geht das über die CSS-Angabe white-space:

Code:
      caption {
         white-space: nowrap;
      }
Wobei das wohl nicht im IE funktioniert und auch für zukünftige noch nicht geplant ist.

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.06.2016, 14:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2014
Beiträge: 5
Homero befindet sich auf einem aufstrebenden Ast
Standard

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 !
Mit Zitat antworten
  #4 (permalink)  
Alt 04.06.2016, 15:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 06.06.2016, 13:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2014
Beiträge: 5
Homero befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 06.06.2016, 16:08
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Habe so auf die Schnelle was gebastelt. Chrome, Opera, Firefox - o.k.
Keine Ahnung, ob es im IE funktioniert - eher nicht. Vielleicht kann es einer testen:
HTML-Code:
<!doctype html>
<meta charset="utf-8">
<title>Homero :: xhtmlforum.de</title>
<style>
div { display: inline-block; vertical-align: top; }
table { width: 100%;  }
caption { white-space: pre; }
tbody { width: 1%; }
/* sichtbar machen */
caption, td { border: 1px solid gray; }
</style>
<div>
  <table>
    <caption>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</caption>
    <tbody>
      <tr>
        <td> Lorem </td>
        <td> ipsum </td>
        <td> dolor </td>
      </tr>
      <tr>
        <td> sit </td>
        <td> amet </td>
        <td> consetetur </td>
      </tr>
    </tbody>
  </table>
</div>
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:04 Uhr.