Wie kann ich Ellipsen in einer Fluid-Weite-Tabelle verwenden, ohne jede Spalte gleich groß zu machen?
Nehmen wir an, meine Spalten in einer Tabelle sind id , name , description und phone . Die description -Spalte ist 1-255 Zeichen, aber die ID ist maximal 3 Zeichen.
Ich möchte, dass die Spalten entsprechend groß sind und nicht jede Spalte die gleiche Größe hat. Und ich möchte, dass die description -Spalte zu einer Ellipse überläuft, wenn das Fenster zu klein ist, um den Inhalt vollständig anzupassen.
table-layout:fixed; ist die Standardmethode, um text-overflow: ellipsis; arbeiten zu lassen, aber es ändert die Größe aller Spalten auf die gleiche Größe. Ich würde es vorziehen, die Breiten auto eher als fest zu behalten.
Können Sie mir helfen?
Hier ist mein jsFiddle : Ссылка
Hier ist ein Screenshot, mit dem ich es zu tun habe:
Beachten Sie, wie Table 1 alle Spalten gleich groß macht? Das ist schrecklich.
Beachten Sie, wie Table 2 die Spalten nach Inhalt sortiert? Das ist gut. Außer wenn der Inhalt zu lang ist: Table 3 . Dann passt es nicht. In diesem Fall möchte ich, dass es in eine Ellipse überläuft.
Und hier ist meine HTML-Tabelle und CSS-Code:
%Vor% Wenn ich die table-layout: fixed; entferne, sind die Spaltenbreiten so groß wie der Inhalt. Leider kann ich die Ellipsen nicht ohne das feste Layout arbeiten. Wo gehe ich falsch?
3 Antworten
Die Lösung, die ich gefunden habe, besteht darin, Ihre Zellen wie folgt zu formatieren:
%Vor%Der erste Teil erzwingt, dass sich jede Spalte so weit wie möglich zusammenzieht, und formatiert jeden ausgeschnittenen Text in jeder Zelle. Sie werden jedoch nicht zu 1px kontrahieren, weil Sie Ihre Tabellenheader verwenden können, um eine Mindestbreite bereitzustellen. Es verhindert auch Zeilenumbruch innerhalb der Tabelle.
Der zweite Teil stellt sicher, dass der gesamte freie Speicherplatz von der Beschreibungsspalte eingenommen wird und nicht gleichmäßig auf alle Spalten verteilt wird.
Wenn Sie in der Beschreibungsspalte eine echte Mindestbreite festlegen möchten, müssen Sie die Mindestbreite auf die Spaltenüberschrift und nicht auf die Zellen der Spalte setzen, da die Zellen mit der maximalen Breite nicht kontrahieren können dünner sein als der Header.
Siehe Ссылка für eine Implementierung.
Meine Lösung besteht darin, jquery zu verwenden, um die maximale Breite des Textes innerhalb der Spalte zu erhalten und sie der Inhaltsbreite zuzuweisen, mit Ausnahme der Spalte mit den Auslassungspunkten, die die maximale Größe ist.
Mein Beispiel-Beispiel finden Sie hier Ссылка
%Vor%Tags und Links html css html-table ellipsis tablelayout