Wie man eine Spalte einer Tabelle eine minimale Breite

Hier ist die Vorlage-Datendatei: https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs

Ich versuche, mich 8 von 10 Spalten einer Tabelle nehmen nur genau die minimale Breite, die Sie benötigen, um, basierend auf dem text, unter Wahrung der Polsterung-und Spaltenüberschriften.

In dem Beispiel-Bild, ich will alle, aber die 4. und 9. Spalten, um die minimale Breite. Technisch gibt es 9 Spaltenüberschriften, und die Letzte hat ein colspan von 2. Der Letzte header ist ein span3. Ich möchte den Prozentsatz der Spalte aufzunehmen, die mindestens die Breite, die benötigt wird, und lassen Sie den Fortschrittsbalken oder die pass - /Sicht - /fail-Schaltflächen nehmen Sie den rest.

Spalte 4 gesetzt ist, um Sie zu ersetzen übergelaufen text mit einem Auslassungszeichen.

Beispiel Bild:
Wie man eine Spalte einer Tabelle eine minimale Breite

InformationsquelleAutor der Frage jnesselr | 2014-11-17

  1. 34

    Es ist ein trick, der einige Zellen mit einer sehr geringen Breite, und dann anwenden einer white-space: nowrap Eigenschaft:

    <table>
    <tr>
        <td class="min">id</td>
        <td class="min">tiny</td>
        <td>Fills space</td>
        <td>Fills space</td>
        <td class="min">123</td>
        <td class="min">small</td>
        <td>Fills space, wider</td>
        <td>Fills space</td>
        <td class="min">thin</td>
    </tr>
</table>
    td {
    width: auto;
}

td.min {
    width: 1%;
    white-space: nowrap;
}

    Live-demo

    Wie Sie sehen, auch in der oben fiddle, nowrap zwingt die Zelle in der Tabelle zu verhindern, dass irgendwelche Zeilenumbrüche, und so richten Sie die Breite der kleinsten möglich.

    HINWEIS: Wenn Sie eine thead Sie anwenden möchten td's stylings zu th als gut.

    UPDATE #1: Auslassungszeichen (...)

    Automatisch Zusammenbruch eine längere Spalte in Ellipsen, die text-overflow: ellipsis ist das, was Sie sind wahrscheinlich auf der Suche nach:

    td.cell-collapse {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

    Live-demo

    Dies erfordert auch overflow eingestellt hidden sowie eine width oder max-width mit einem festen Wert. Fügen Sie die cell-collapse - Klasse Zellen, deren Breite Sie möchten, zu beschränken.

    UPDATE #2: der Umgang mit Bootstrap

    Bootstrap ist table Klasse setzt width: 100%; dem Durcheinander dieser Ansatz. Sie können das Problem beheben, dass mit table { width: inherit !important; }

    Live-demo

    HINWEIS: Die Tabellen in diesem Ansatz bereits die volle Breite, weil die Tabellenzellen bereits width: auto;.

    Vorherigen Javascript-Basis-Lösung wurde entfernt, da die Reine CSS-basierte Ansatz nun konsequent arbeitet in allen modernen Browsern. Der ursprüngliche code ist noch verfügbar, die auf den verknüpften JSfiddleauskommentiert.

    InformationsquelleAutor der Antwort John Weisz

  2. 1

    Wenn Sie wissen, die Größen, die Sie möchten, dass Ihre Spalte und Sie fixiert sind, schlage ich vor, eine Feste Tisch-layout. Es ermöglicht Ihnen die Angabe der festen % jede Spalte nimmt.

    Hier ist ein link, der mir geholfen in einer ähnlichen situation
    http://css-tricks.com/fixing-tables-long-strings/

    InformationsquelleAutor der Antwort Vall3y

Schreibe einen Kommentar