Autowidth de colonne de table CSS

Compte tenu de ce qui suit, comment puis-je rendre la taille automatique de ma dernière colonne à son contenu? (La dernière colonne doit être autosize-width au contenu. Supposons que je n’ai qu’un élément li, il devrait rétrécir contre 3 éléments li, etc.):

Type File Sample Action
Division 1 Division 2 Division 3 Division 4 Division 5
Division 1 Division 2 Division 3 Division 4

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

Si vous voulez vous assurer que la dernière ligne ne s’emballe pas et que la taille ne correspond pas à vos besoins, jetez un coup d’œil à

 td { white-space: nowrap; } 

Vous pouvez spécifier la largeur de toutes les cellules du tableau sauf les dernières et append une table-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 force les LI en ligne à ne pas se briser. Malheureusement, cela ne conduit pas à un nouveau calcul de largeur dans le 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 non spécifié). Ensuite, son contenu en ligne avec cette largeur calculée est rendu et la propriété d’ white-space blanc 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 auto et min ou max comme ceci:

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