127 votes

CSS colonne de table autowidth

Compte tenu de la suivante, comment puis-je faire ma dernière colonne automatique de la taille de son contenu? (La dernière colonne doit autosize-largeur du contenu. Supposons que j'ai seulement 1 élément li il doit se serrer contre 3 li éléments, 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;}

Merci

265voto

Doug Amos Points 1079

La suite permettra de résoudre votre problème:

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

30voto

Sander Points 617

Si vous voulez vous assurer que la dernière ligne ne pas envelopper et donc de la taille de la façon dont vous le souhaitez, jetez un oeil à

td {
 white-space: nowrap;
}

3voto

acme Points 5109

Vous pouvez spécifier la largeur de tous, mais le dernier cellules d'un tableau et ajouter une table-layout:fixe et d'une largeur de la table.

Vous pouvez définir

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

(ou ensemble pour la dernière TD comme Sander a suggéré à la place).

Cela force le inline-LIs ne pas le casser. Malheureusement, cela ne donne pas lieu à un nouveau calcul de la largeur du contenant UL (et ce parent TD), et n'a donc pas autosize le dernier TD.

Cela signifie: si un élément inline n'a pas de largeur, TD, la largeur est toujours calculée automatiquement en premier (si non spécifié). Puis son contenu en ligne avec cette largeur calculée est rendu et l' white-space-propriété est appliquée, l'étirement de son contenu au-delà de la calcul de limites.

Donc je suppose que ce n'est pas possible sans avoir un élément à l'intérieur de la dernière TD avec une largeur spécifique.

-3voto

Abudayah Points 1535

l'utilisation de l'auto et du min ou max largeur comme ceci:

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X