Automatische Breite der CSS-Tabellenspalte

Wie kann ich die Größe meiner letzten Spalte automatisch anpassen? (Die letzte Spalte sollte die Breite des Inhalts automatisch anpassen. Angenommen, ich habe nur 1 Li-Element, das verkleinert werden soll, im Gegensatz zu 3 Li-Elementen usw.):

            <table cellspacing="0" cellpadding="0" border="0">
            <thead><!-- universal table heading -->
                <tr>
                    <td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
                    <td class="tc">Type</td>
                    <th>File</th>
                    <th>Sample</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td>Division 5</td>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td class="last">
                        <ul class="actions">
                            <li><a class="iconStats" href="#">Statystyki</a></li>
                            <li><a class="iconEdit" href="#">Edytuj</a></li>
                            <li><a class="iconDelete" href="#">Usuń</a></li>

                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>

CSS:

table { table-layout: fixed; width: 100%; }
table tr { border-bottom:1px solid #e9e9e9; }
table thead td, th {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100% ; font-weight: bold; text-align:left;}
table tr td, th { border:1px solid #D5D5D5; padding:15px;}
table tr:hover { background:#fcfcfc;}
table tr ul.actions {margin: 0;}
table tr ul.actions li {display: inline; margin-right: 5px;}

Folgendes wird Ihr Problem lösen:

td.last {
    width: 1px;
    white-space: nowrap;
}

Flexible, klassenbasierte Lösung

Eine flexiblere Lösung besteht darin, eine .fitwidthKlasse zu erstellen und diese auf alle Spalten anzuwenden, um sicherzustellen, dass deren Inhalt in eine Zeile passt:

td.fitwidth {
    width: 1px;
    white-space: nowrap;
}

Und dann in Ihrem HTML:

<tr>
    <td class="fitwidth">ID</td>
    <td>Description</td>
    <td class="fitwidth">Status</td>
    <td>Notes</td>
</tr>

Wenn Sie sicherstellen möchten, dass die letzte Zeile nicht umbrochen wird und somit die gewünschte Größe aufweist, schauen Sie sich diese an

td {
 white-space: nowrap;
}

Sie können die Breite aller Zellen außer den letzten Tabellenzellen angeben und der Tabelle ein Tabellenlayout hinzufügen: fest und eine Breite.

Sie könnten einstellen

table tr ul.actions {margin: 0; white-space:nowrap;}

(oder stellen Sie dies für den letzten TD ein, wie Sander stattdessen vorgeschlagen hat).

Dies zwingt die Inline-LIs, nicht zu brechen. Leider führt dies nicht zu einer neuen Breitenberechnung im enthaltenden UL (und diesem übergeordneten TD) und führt daher nicht zu einer automatischen Größenänderung des letzten TD.

Dies bedeutet: Wenn ein Inline-Element keine bestimmte Breite hat, wird die Breite eines TD immer zuerst automatisch berechnet (falls nicht angegeben). Dann wird sein Inline-Inhalt mit dieser berechneten Breite gerendert und die white-spaceEigenschaft angewendet, wodurch sein Inhalt über die berechneten Grenzen hinaus gedehnt wird.

Ich denke, es ist nicht möglich, ohne ein Element innerhalb des letzten TD mit einer bestimmten Breite zu haben.

Verwenden Sie Auto und Min oder Max Breite wie folgt:

td {
max-width:50px;
width:auto;
min-width:10px;
}