web-dev-qa-db-fra.com

Définir min-width dans le tableau HTML <td>

Ma table a plusieurs colonnes.

Chaque colonne doit avoir une largeur dynamique qui dépend de la taille de la fenêtre du navigateur. Par contre, chaque colonne ne doit pas être trop petite. Alors j'ai essayé de mettre min-width pour ces colonnes, mais ce n'est pas une propriété valide. A essayé min-width pour <td> aussi, mais c’est aussi une propriété invalide.

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

htmlcsshtml-table
55
Thanhma San

essaye celui-là:

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

min-width et max-width Les propriétés ne fonctionnent pas comme prévu pour les cellules de tableau. De spec :

Dans CSS 2.1, l'effet de 'min-width' et de 'max-width' sur les tableaux, les tableaux incorporés, les cellules de tableau, les colonnes de tableau et les groupes de colonnes est indéfini.

Cela n'a pas changé dans CSS3.

28
o.v.

Essayez d'utiliser un élément invisible (ou psuedoelement) pour forcer le développement de la cellule de la table.

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

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

2
Petr Cibulka

Une solution consiste à ajouter un <div style="min-width:XXXpx"> dans le td, et laissez le <td style="width:100%">

0
user9413974
<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 en utilisant un script email.

0
Redous