Définir la largeur minimale dans le <td>de la table HTML

Question

Mon tableau comporte plusieurs colonnes.

Chaque colonne doit avoir une largeur dynamique qui dépend de la taille de la fenêtre du navigateur. D'autre part, chaque colonne ne doit pas être trop petite. J'ai donc essayé de définir min-width pour ces colonnes mais ce n'est pas une propriété valide. J'ai essayé min-width para <td> également, mais il s'agit là aussi d'une propriété non valide.

Y a-t-il un moyen de définir min-width pour col/td dans un tableau HTML ?

Answer 1

Si vous avez besoin que vos cellules soient suffisamment grandes pour contenir le plus grand mot de cette colonne, vous pouvez essayer d'entourer ce ou ces mots spécifiques avec <span style="white-space: nowrap"> qui fera en sorte que ce mot spécifique ne soit pas enveloppé, ce qui obligera la largeur de la colonne à être au minimum de cette largeur dynamique.

Idée de @Jon .

Answer 2

Une solution serait d'ajouter un <div style="min-width:XXXpx"> dans le td, et laisser le <td style="width:100%">

Answer 3

Si vous avez défini les pourcentages de largeur de vos colonnes et que pour vous il suffirait de FIXER la largeur totale du tableau ou de définir une largeur minimale, ceci est valable.

<table style="min-width:1000px;">
or
<table style="width:1000px;">

veuillez noter qu'il est dit que cela fonctionne UNIQUEMENT en tant que style en ligne.

J'ai eu ce besoin avec un tableau bootstrap 5 et mon code s'est terminé comme suit

<table style="min-width:1000px;" class="table table-striped 
table-hover table-bordered text-center table-responsive" id="tabella">

vous apprécierez mieux cet aspect lorsque vous serez en déplacement avec des TDs de petite taille ou vides.

Answer 4

<table style="border:2px solid #ddedde">
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
</table>