Ajuster la largeur des cellules au contenu

266

Compte tenu du balisage suivant, comment pourrais-je utiliser CSS pour forcer une cellule (toutes les cellules de la colonne) à s'adapter à la largeur du contenu qu'il contient plutôt qu'à l'étirer (ce qui est le comportement par défaut)?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

EDIT: Je me rends compte que je pourrais coder en dur la largeur, mais je préfère ne pas le faire, car le contenu qui ira dans cette colonne est dynamique.

En regardant l'image ci-dessous, la première image est ce que le balisage produit. La deuxième image est ce que je veux.

entrez la description de l'image ici

html css html-table Mansfield
la source
Je ne comprends pas ta question. Voulez-vous limiter la dernière colonne à une largeur spécifique?
MetalFrog
8
@diEcho Je pensais que c'était assez clair. Je vais ajouter une photo ou deux.
Mansfield
Copie
Vadzim

Réponses:

451

Je ne sais pas si je comprends votre question, mais je vais essayer. JSfiddle de l'exemple .

HTML:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}
MetalFrog
la source
3
pourquoi vous écrivez <table style="width:100%">au lieu de<table width="100%" >
diEcho
17
@diEcho Je n'ai pas écrit cette partie, c'était à partir de l'exemple de code. Quoi qu'il en soit, il n'est pas recommandé d'utiliser l'attribut width sur les éléments. Dans cet exemple rapide, le CSS en ligne est correct, mais il devrait être résumé dans un fichier s'il s'agissait d'un code de niveau production.
MetalFrog
45
Une façon plus propre de le faire serait de définir un style appelé "nostretch" (ou quelque chose comme ça), puis de définir simplement nostretch dans le CSS pour avoir la largeur: 1% et le nowrap. Le dernier TD aurait alors 'class = "nostretch block"'. De cette façon, vous pouvez "extraire" n'importe quelle cellule de votre choix.
Tim Holt du
3
C'est une bonne solution, mais malheureusement, dans Bootstrap 3, mes groupes de boutons s'enroulent à partir de ceci: jsfiddle.net/wexdX/326 Des idées sur la façon de le supprimer?
Martin Braun
5
Cela ne fonctionne que lorsque le contenu est plus large que la largeur: 1% - non? Parce que si le contenu est plus petit, alors largeur: 1%, la cellule sera plus grande.
Adam
44

Réglage

max-width:100%;
white-space:nowrap;

va résoudre votre problème.

Shubham Nigam
la source
8

Pour moi, c'est le meilleur ajustement automatique et redimensionnement automatique pour le tableau et ses colonnes (utilisez css! Important ... seulement si vous ne pouvez pas sans)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

Ne spécifiez pas la largeur CSS pour le tableau ou les colonnes du tableau. Si le contenu du tableau est plus grand, la taille de l'écran passera à.

myset
la source
3

La définition de la largeur CSS à 1% ou 100% d'un élément selon toutes les spécifications que j'ai pu découvrir est liée au parent. Bien que Blink Rendering Engine (Chrome) et Gecko (Firefox) au moment de la rédaction semblent bien gérer ce 1% ou 100% (faire rétrécir une colonne ou une colonne pour remplir l'espace disponible), il n'est pas garanti selon toutes les spécifications CSS Je pourrais trouver à le rendre correctement.

Une option consiste à remplacer le tableau par des divs flex CSS4:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Cela fonctionne dans les nouveaux navigateurs ie IE11 + voir le tableau au bas de l'article.

Mladen Adamovic
la source
1

Il y a plusieurs façons de procéder!

corrigez-moi si je me trompe mais la question cherche ce genre de résultat.

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

Les 2 premiers champs "partageront" la page restante (REMARQUE: si vous ajoutez plus de texte à l'un ou l'autre des champs à 50%, cela prendra plus d'espace), et le dernier champ dominera constamment le tableau.

Si vous êtes heureux de laisser l' habillage du texte, vous pouvez déplacer l' espace blanc: nowrap; au style du 3ème champ
sera le seul moyen de commencer une nouvelle ligne dans ce domaine.

alternativement, vous pouvez définir une longueur sur le dernier champ à savoir. largeur: 150px, et laissez le pourcentage sur les 2 premiers champs.

J'espère que cela t'aides!

Christian Newman
la source
-1

Facile :

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>
Parth Jani
la source