Larghezza automatica della colonna della tabella CSS

Dato quanto segue, come faccio a ridimensionare automaticamente l'ultima colonna in base al suo contenuto? (L'ultima colonna dovrebbe ridimensionare automaticamente la larghezza rispetto al contenuto. Supponiamo che io abbia solo 1 elemento li che dovrebbe ridursi rispetto a 3 elementi li ecc.):

            <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;}

Quanto segue risolverà il tuo problema:

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

Soluzione flessibile basata sulle classi

E una soluzione più flessibile è creare una .fitwidthclasse e applicarla a tutte le colonne che desideri per assicurarti che il loro contenuto si adatti a una riga:

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

E poi nel tuo HTML:

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

Se vuoi assicurarti che l'ultima riga non si avvolga e quindi ridimensiona nel modo desiderato, dai un'occhiata

td {
 white-space: nowrap;
}

È possibile specificare la larghezza di tutte le celle della tabella tranne le ultime e aggiungere un layout di tabella: fisso e una larghezza alla tabella.

Potresti impostare

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

(o impostalo per l'ultimo TD come suggerito invece da Sander).

Questo costringe gli inline-LIs a non rompersi. Sfortunatamente questo non porta a un nuovo calcolo della larghezza nell'UL contenente (e questo TD genitore), e quindi non dimensiona automaticamente l'ultimo TD.

Ciò significa: se un elemento inline non ha una data larghezza, la larghezza di un TD viene sempre calcolata automaticamente per prima (se non specificata). Quindi viene eseguito il rendering del contenuto in linea con questa larghezza calcolata e white-spaceviene applicata la proprietà, estendendone il contenuto oltre i limiti calcolati.

Quindi immagino che non sia possibile senza avere un elemento all'interno dell'ultimo TD con una larghezza specifica.

usa auto e larghezza minima o massima in questo modo:

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