kostenloser Webspace werbefrei: lima-city

Tabelle - Umbruch verhindern und Überstand abschneiden

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   g*******r

   18:27, 21.12.2016

   Moin Moin zusammen,
   
   ich stehe vor einer Herausforderung und komme irgendwie nicht an die Lösung.
   
   Ich habe eine html Tabelle.
   In dieser Tabelle sollen Datensätze von Usern angezeigt werden, wodurch die Länge der Texte entsprechend variieren kann.
   Um das ganze übersichtlich zu halten möchte ich hierbei Zeilenumbrüche vermeiden und den "Überstand" abschneiden.
   Die Breite der Tabellenspalten grenze ich
   
   Nun weiss ich, Zeilenumbrüche vermeide ich mit "white-space:nowrap".
   Überstände kann ich mit "overflow: hidden; text-overflow: ellipsis;" beschneiden.
   
   Nun aber zur Besonderheit der Tabellenspalten. Sobald ich den Zeilenumbruch per nowrap verbiete verbreitert sich die Spalte entsprechend des Inhalts, es wird der Inhalt jedoch nicht gekürzt, obwohl ich bereits die Breite der Tabelle auf 100% begrenzt habe, wodurch es über die 100% Breite hinausgeht.
   
   Ich habe bereits versucht den einzelnen Spalten eine feste Breite zu geben:
   
   display: inline-block;
   width: 20%;
   
   Aber Pustekuchen, entweder der Text wird nicht umgebrochen und durchbricht dann meine Breitenvorgaben oder er kürzt tatsächlich den Text, ist dann aber viel schmaler als ich angegeben habe.
   
   Ich könnte das ganze natürlich über ein Containergerüst realisieren, finde die Variante aber wenig ansprechend, zumal die Tabelle bereits steht. Habt ihr vielleicht noch Ideen wie ich hier vorgehen könnte?
   
   Vielen Dank im Voraus!
   
   Gruß
   
   PS: Das nächste Problem ist, dass bei der Verwendung von display: inline-block die Spalten nicht mehr ordentlich untereinander stehen sondern eineinandergeschoben sind.
   
   PS2: Habe es nun hinbekommen. Den Spalten "display: inline-block" und eine feste Breite mitgegeben. Zuvor hatte scheinbar eine andere Breitenangabe quergeschossen.
   
   Beitrag zuletzt geändert: 22.12.2016 14:37:11 von gamegazer

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. g****e

   13:54, 28.12.2016

   Ich möchte hier noch kurz ausführen, wo das konkrete Problem liegt, damit du weißt, warum es sich so verhält:
   
   HTML Elemente sind eigentlich nur Tags ohne Verhalten. Das TD-Element, das TR-Element, all diese Elemente folgen dem XML Schema für HTML, und haben keinerlei Beziehung zueinander. Was diese Elemente besonders macht ist ihr default-Style. Jeder Browser bringt ein CSS-Stylesheet mit, welches in jeder Seite eingebunden wird. Darin sind Regeln definiert wie zum Beispiel:
   

   table { display: table; }
   tr { display: table-row; }
   td { display: table-cell; }

   
   
   Die Eigenschaften, wie sich ein Table verhält, liegen also im CSS, nicht im HTML. Daher kannst du auch mit divs/spans eine Tabelle bauen, die sich identisch verhält.
   Wenn du nun von einem TD-Element die Display-Eigenschaft überschreibst, veränderst du natürlich sein Verhalten. Es wird nicht mehr den Regeln der table-cell gehorchen, sondern den Regeln eines inline-block Elements.
   Daher verhält sich das Konstrukt merkwürdig, da nun ein Inhomogenes System geschaffen wurde. Du hast es hingekriegt, dass es nicht auffällt, und das ist gut, jedoch ist das erstmal, wie es ist.
   
   Übrigens: Overflow-Eigenschaften, wirken nur auf Elemente, welche ein display:blockartigs Verhalten haben (also auch inline-block, nicht jedoch display:table... Sachen. Der Grund ist, da es sonst eher inline-Verhalten ist, und das sich an den Content anpasst. Dementsprechend ist es unmöglich einen ViewPort für das Scrolling auszumachen).
   
   Vielleicht hilft dir dieses Wissen, um andere Probleme zu lösen :) (oder dem Nächsten, der es liest)

4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?