web-dev-qa-db-fra.com

Ajuster la largeur de la cellule au contenu

Étant donné le balisage suivant, comment pourrais-je utiliser CSS pour forcer une cellule (toutes les cellules de la colonne) à s’adapter à la largeur du contenu qu’elle contient plutôt qu’à l’étirement (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 durement la largeur, mais je préférerais ne pas le faire, car le contenu de 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.

enter image description here

htmlcsshtml-table
234
Mansfield

Je ne suis pas sûr de comprendre votre question, mais je vais tenter le coup. 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;
}
404
MetalFrog

Réglage

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

va résoudre votre problème.

39
Shubham Nigam

Pour moi, c’est le meilleur ajustement et redimensionnement automatique pour la table et ses colonnes (utilisez css! Important ... seulement si vous ne pouvez pas vous en passer)

.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 table ou pour les colonnes de table. Si le contenu de la table est plus grand, la taille de l'écran passera à.

7
myset

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

Une option consiste à remplacer tableau par CSS4 flex divs:

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

Cela fonctionne dans les nouveaux navigateurs, c'est-à-dire IE11 +, voir le tableau au bas de l'article.

2
Mladen Adamovic

Cela a résolu mon problème

.d-inline-block {
    display: inline-block!important;
}
0
Arun Prasad E S

Facile :

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