web-dev-qa-db-fra.com

Largeur automatique des colonnes de la table CSS

Compte tenu de ce qui suit, comment puis-je adapter la taille de ma dernière colonne à son contenu? (La dernière colonne doit être redimensionnée automatiquement par rapport au contenu. Supposons que je n’ai qu’un élément li qui doit être réduit 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;}
htmlcssxhtmlcss3
92
ShaneKm

Ce qui suit va résoudre 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 classe .fitwidth et à l'appliquer à toutes les colonnes pour lesquelles leur contenu est adapté 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>
203
Doug Amos

Si vous voulez vous assurer que la dernière ligne ne se termine pas et que vous redimensionnez comme vous le souhaitez, jetez un oeil à

td {
 white-space: nowrap;
}
24
Sander

Vous pouvez spécifier la largeur de toutes les cellules sauf celles de la table et ajouter un tableau-layout: fixed et une largeur à la table.

Vous pourriez définir

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

(ou définissez ceci pour le dernier TD comme suggéré par Sander à la place).

Cela oblige les inline-LIs à ne pas casser. Malheureusement, cela ne donne pas lieu à un nouveau calcul de largeur dans l’UL contenant (et ce TD parent) et ne redimensionne donc pas automatiquement le dernier TD.

Cela signifie que 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). Alors son contenu en ligne avec cette largeur calculée est rendu et la propriété white-space- est appliquée, ce qui étend son contenu au-delà des limites calculées.

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

1
acme