Jeu de min-width dans le HTML de la table <td>

Mon tableau comporte plusieurs colonnes.

Chaque colonne a une largeur qui dépend de la taille de la fenêtre du navigateur. D'autre part, chaque colonne ne doit pas être trop petit. J'ai donc essayé de mettre en min-width pour ces colonnes, mais ce n'est pas une propriété valide. Essayé min-width pour <td> en tant que bien, mais cela aussi est une propriété non valide.

Est-il possible de définir min-width col/td en tableau HTML?

InformationsquelleAutor Thanhma San | 2013-08-29
  1. 60

    essayez celui-ci: 

    <table style="border:1px solid">
    <tr>
        <td style="min-width:50px">one</td>
        <td style="min-width:100px">two</td>
    </tr>
</table>
    InformationsquelleAutor Ali Sağırvelioğulları
  2. 29

    min-width et max-width propriétés ne fonctionnent pas de la façon que vous attendez pour les cellules de tableau. De spec:

    Dans CSS 2.1, l'effet de 'min-width' et 'max-width' sur les tables en ligne de tableaux, cellules de tableau, les colonnes de la table, et les groupes de colonnes n'est pas défini.

    Cela n'a pas changé en CSS3.

    • En fait ce qui a changé dans CSS3 modèle de boîte et les propriétés s'applique à "tous les éléments, mais non remplacer les éléments en ligne, les lignes de la table, et les groupes de lignes"
    InformationsquelleAutor o.v.
  3. 4

    Essayez d'utiliser un élément invisible (ou psuedoelement) pour forcer la table-cell pour étendre.

    td:before {
  content: '';
  display: block; 
  width: 5em;
}

    JSFiddle: https://jsfiddle.net/cibulka/gf45uxr6/1/

    • Votre lien est mort, et votre solution ne fonctionne pas pour moi!
    • Je pense, cela ne fonctionnera pas si vous avez table-layout: fixed;.
    InformationsquelleAutor Petr Cibulka
  4. 1

    Une façon devrait être d'ajouter un <div style="min-width:XXXpx"> au sein de la td, et de laisser le <td style="width:100%">

    InformationsquelleAutor user9413974
  5. 0
    <table style="min-width:50px; max-width:150px;">
    <tr>
        <td style="min-width:50px">one</td>
        <td style="min-width:100px">two</td>
    </tr>
</table>

    Cela fonctionne pour moi, à l'aide d'un script email.

    • Alors ce devrait être un commentaire, pas une réponse, Mon Seigneur
    InformationsquelleAutor Redous
  6. 0

    Si vous utilisez la disposition fixe le tableau i.e datatable, puis

    <td style="display:inline-block; min-width: 「…」px;">Foo</td>

OR

<td style="display:inline-block; min-width: max-content;">Bar</td>
    InformationsquelleAutor Hassan Tareq
  7. -3
    <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>
    • Définir la largeur en pourcentage seulement de la rendre dynamique de base sur la taille de la fenêtre, mais ce que je veux, c'est dynamique, largeur ET une largeur minimale
    InformationsquelleAutor AmirtharajCVijay