Autowidth de colonne de table CSS

Compte tenu de ce qui suit, comment adapter la taille automatique de ma dernière colonne à son contenu? (La dernière colonne doit redimensionner automatiquement la largeur du contenu. Supposons que je n'ai qu'un seul élément li, elle devrait être réduite par rapport à 3 éléments li, etc.):

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

Ce qui suit résoudra votre problème:

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

Solution flexible basée sur les classes

Et une solution plus flexible consiste à créer une .fitwidthclasse et à l'appliquer à toutes les colonnes dont vous souhaitez vous assurer que leur contenu est ajusté sur une seule ligne:

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

Et puis dans votre HTML:

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

Si vous voulez vous assurer que la dernière ligne ne s'enroule pas et ainsi dimensionner comme vous le souhaitez, jetez un œil à

td {
 white-space: nowrap;
}

Vous pouvez spécifier la largeur de toutes les cellules du tableau sauf les dernières et ajouter une disposition de tableau: fixe et une largeur au tableau.

Vous pourriez définir

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

(ou réglez ceci pour le dernier TD comme Sander l'a suggéré à la place).

Cela oblige les LI en ligne à ne pas se rompre. Malheureusement, cela ne conduit pas à un nouveau calcul de largeur dans l'UL contenant (et ce TD parent), et donc ne redimensionne pas automatiquement le dernier TD.

Cela signifie: si un élément en ligne n'a pas de largeur donnée, la largeur d'un TD est toujours calculée automatiquement en premier (si elle n'est pas spécifiée). Ensuite, son contenu en ligne avec cette largeur calculée est rendu et la white-spacepropriété est appliquée, étirant son contenu au-delà des limites calculées.

Donc je suppose que ce n'est pas possible sans avoir un élément dans le dernier TD avec une largeur spécifique.

utilisez la largeur automatique et min ou max comme ceci:

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