it-swarm.com.de

CSS: Kürzen Sie Tabellenzellen, aber passen Sie sie so gut wie möglich an

Treffen Sie Fred. Er ist ein Tisch:

One cell has more content and is wider, the other has less content and is narrower

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

Freds Wohnung hat die bizarre Angewohnheit, die Größe zu ändern, und so hat er gelernt, einen Teil seines Inhalts zu verbergen, um nicht alle anderen Einheiten umzustoßen und Mrs. Whitfords Wohnzimmer in Vergessenheit zu geraten:

The cells are now the same size, but only one has its content truncated, and it looks like if the other cell gave if some whitespace, they could both fit.

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: Ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: Ellipsis">Less content here</td>
    </tr>
</table>

Das funktioniert, aber Fred hat das nörgelnde Gefühl, dass wenn seine rechte Zelle (die er Celldito nennt) ein wenig Platz weglässt, seine linke Zelle nicht so oft abgeschnitten wird. Kannst du seinen Verstand retten?


Fazit: Wie können die Zellen einer Tabelle gleichmäßig überlaufen, und nur wenn sie alle ihre Leerzeichen aufgegeben haben?

205
s4y
<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:Ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

64
ladislav

Ich glaube, ich habe eine Lösung ohne Javascript! Besser spät als nie, oder? Immerhin ist dies eine ausgezeichnete Frage und Google ist alles vorbei. Ich wollte mich nicht mit einer JavaScript-Korrektur zufrieden geben, da ich das leichte Zittern von Dingen, die sich nach dem Laden der Seite bewegen, als inakzeptabel empfinde.

Funktionen :

  • Kein Javascript
  • Kein festes Layout
  • Keine Tricks mit Gewichtung oder prozentualer Breite
  • Funktioniert mit beliebig vielen Spalten
  • Einfache serverseitige Generierung und clientseitige Aktualisierung (keine Berechnung erforderlich)
  • Browserübergreifend kompatibel

Funktionsweise : Platzieren Sie innerhalb der Tabellenzelle zwei Kopien des Inhalts in zwei verschiedenen Elementen in einem relativ positionierten Containerelement. Das Abstandselement ist statisch positioniert und wirkt sich daher auf die Breite der Tabellenzellen aus. Indem wir den Inhalt der Spacer-Zelle umschließen lassen, können wir die "beste" Breite der Tabellenzellen erhalten, nach denen wir suchen. Dadurch können wir auch das absolut positionierte Element verwenden, um die Breite des sichtbaren Inhalts auf die des relativ positionierten übergeordneten Elements zu beschränken.

Getestet und funktioniert in: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

Ergebnisbilder :

Nice proportional widthsNice proportional clipping

JSFiddle : http://jsfiddle.net/zAeA2/

Beispiel für HTML/CSS :

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}
36
Lucifer Sam

Ich war vor ein paar Tagen der gleichen Herausforderung ausgesetzt. Es scheint Luzifer Samgefunden die beste Lösung.

Aber mir ist aufgefallen, dass Sie Inhalte am spacer-Element duplizieren sollten. Dachte, es ist nicht so schlimm, aber ich möchte auch title popup für abgeschnittenen Text anwenden. Und es bedeutet, dass Langtext in meinem Code zum dritten Mal vorkommt.

Hier schlage ich vor, über das Pseudoelement :after Auf das Attribut title zuzugreifen, um einen Abstandhalter zu generieren und HTML sauber zu halten.

Funktioniert mit IE8 +, FF, Chrome, Safari, Opera

<table border="1">
  <tr>
    <td class="Ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>
.Ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.Ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
    line-height: 1em;
}

/* spacer content */
.Ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

23
Henry Feesler

Wenn Javascript akzeptabel ist, habe ich eine schnelle Routine zusammengestellt, die Sie als Ausgangspunkt verwenden können. Es wird dynamisch versucht, die Zellenbreiten mithilfe der inneren Breite eines Bereichs anzupassen, um auf Ereignisse zur Größenänderung des Fensters zu reagieren.

Derzeit wird davon ausgegangen, dass jede Zelle normalerweise 50% der Zeilenbreite erhält. Die rechte Zelle wird reduziert, um die maximale Breite der linken Zelle beizubehalten und ein Überlaufen zu vermeiden. Abhängig von Ihren Anwendungsfällen können Sie eine viel komplexere Logik für den Breitenausgleich implementieren. Hoffe das hilft:

Markup für die Zeile, die ich zum Testen verwendet habe:

<tr class="row">
    <td style="overflow: hidden; text-overflow: Ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: Ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

JQuery, die das Größenänderungsereignis verknüpft:

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});
18
samplebias

Es gibt eine viel einfachere und elegantere Lösung.

Fügen Sie in die Tabellenzelle, die Sie abschneiden möchten, einfach ein Container-Div mit CSS-Tabellenlayout ein: fixed. Dieser Container nimmt die gesamte Breite der übergeordneten Tabellenzelle ein und reagiert sogar darauf.

Stellen Sie sicher, dass die Elemente in der Tabelle abgeschnitten werden.

Funktioniert ab IE8 +

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

und CSS:

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: Ellipsis;
      white-space: nowrap;
    }

hier ist eine funktionierende Fiddle https://jsfiddle.net/d0xhz8tb/

15
satyavh

Das Problem ist das 'Tabellenlayout: fest', das Spalten mit gleichmäßigem Abstand und fester Breite erzeugt. Durch Deaktivieren dieser CSS-Eigenschaft wird jedoch der Textüberlauf abgebrochen, da die Tabelle so groß wie möglich wird (und es dann keinen Überlauf mehr gibt).

Es tut mir leid, aber in diesem Fall kann Fred seinen Kuchen nicht haben und essen. Wenn der Vermieter Celldito nicht weniger Platz zum Arbeiten einräumt, kann Fred seinen nicht benutzen.

11

Sie könnten versuchen, bestimmte Spalten wie folgt zu "gewichten":

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

Sie können auch weitere interessante Verbesserungen ausprobieren, z. B. die Verwendung von Spalten mit einer Breite von 0% und eine Kombination aus white-space CSS-Eigenschaft.

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

Du hast die Idee.

9
Elliot Cameron

Verwenden Sie einige CSS-Hack, es scheint die display: table-column; kann kommen, um zu retten:

<div class="myTable">
    <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
    <div class="staticCell">Less content</div>
</div>

.myTable {
    display: table;
    width: 100%;
}

.myTable:before {
    display: table-column;
    width: 100%;
    content: '';
}

.flexibleCell {
    display: table-cell;
    max-width:1px;
    white-space: nowrap;
    text-overflow:Ellipsis;
    overflow: hidden;
}

.staticCell {
    white-space: nowrap;
}

JSFiddle: http://jsfiddle.net/blai/7u59asyp/

3
blai

Wie samplebias answer habe ich auch hier ein spezielles jQuery-Plugin erstellt, wenn Javascript eine akzeptable Antwort ist: https://github.com/marcogrcr/jquery-tableoverflow

Um das Plugin zu benutzen, tippe einfach

$('selector').tableoverflow();

Vollständiges Beispiel: http://jsfiddle.net/Cw7TD/3/embedded/result/

Bearbeitungen:

  • Fix in jsfiddle für IE Kompatibilität.
  • Fix in jsfiddle für bessere Browserkompatibilität (Chrome, Firefox, IE8 +).
3
Marco

Ja, ich würde sagen, dreißigdot hat es, es gibt keine Möglichkeit, es zu tun, wenn Sie eine js-Methode verwenden. Sie sprechen von einem komplexen Satz von Rendering-Bedingungen, die Sie definieren müssen. z.B. Was passiert, wenn beide Zellen für ihre Wohnungen zu groß werden? Sie müssen entscheiden, wer Priorität hat, oder ihnen einfach nur einen Prozentsatz der Fläche zuweisen. Wenn sie überfüllt sind, belegen sie beide diese Fläche und nur, wenn eine Whitespace hat, werden Sie Strecken Sie Ihre Beine in der anderen Zelle, so oder so gibt es keine Möglichkeit, dies mit CSS zu tun. Obwohl es einige ziemlich irre Dinge gibt, die Leute mit CSS machen, an die ich nicht gedacht habe. Ich bezweifle wirklich, dass du das schaffst.

3
user648116

Diese Frage taucht in Google ganz oben auf. In meinem Fall habe ich das CSS-Snippet von https://css-tricks.com/snippets/css/truncate-string-with-Ellipsis/ verwendet, aber angewendet es zum td gab NICHT das gewünschte Ergebnis.

Ich musste einen div-Tag um den Text im td einfügen und die Ellipse funktionierte schließlich.

Abgekürzter HTML-Code;

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

Abgekürztes CSS;

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:Ellipsis; }
1
MarcoZen

sie können die Breite der rechten Zelle auf das Minimum der erforderlichen Breite einstellen und dann Überlauf-Versteckt + Text-Überlauf auf die Innenseite der linken Zelle anwenden, aber Firefox ist hier fehlerhaft ...

obwohl, scheint, flexbox kann helfen

0
4esn0k

Überprüfen Sie, ob "nowrap" das Problem zu einem gewissen Grad löst. Hinweis: nowrap wird in HTML5 nicht unterstützt

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
    <td style="overflow: hidden; text-overflow: Ellipsis;" nowrap >This cells has more content  </td>
    <td style="overflow: hidden; text-overflow: Ellipsis;" nowrap >Less content here has more content</td>
</tr>
0
amlan

Ich weiß nicht, ob dies jemandem helfen wird, aber ich habe ein ähnliches Problem gelöst, indem ich für jede Spalte bestimmte prozentuale Breitengrößen angegeben habe. Dies funktioniert natürlich am besten, wenn jede Spalte einen Inhalt mit einer Breite aufweist, die nicht zu stark variiert.

0
DKO

Ich habe kürzlich daran gearbeitet. Schauen Sie sich das an jsFiddle test , versuchen Sie es selbst, indem Sie die Breite der Basistabelle ändern, um das Verhalten zu überprüfen).

Die Lösung besteht darin, eine Tabelle in eine andere einzubetten:

<table style="width: 200px;border:0;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="width: 100%;">
                <table style="width: 100%;border:0;border-collapse:collapse">
                    <tbody>
                        <tr>
                            <td>
                                <div style="position: relative;overflow:hidden">
                                    <p>&nbsp;</p>
                                    <p style="overflow:hidden;text-overflow: Ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="white-space:nowrap">Less content here</td>
        </tr>
    </tbody>
</table>

Ist Fred jetzt mit Cellditos Expansion zufrieden?

0
I.G. Pascual