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

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>

Answer 2

min-width y max-width ne fonctionnent pas comme vous l'attendez pour les cellules de tableau. À partir de spec :

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

Cela n'a pas changé en CSS3.

Answer 3

Essayez d'utiliser un élément invisible (ou un pseudo-élément) pour forcer la cellule du tableau à se développer.

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

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

Answer 4

<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 email script.

Answer 5

Aucune de ces solutions n'a fonctionné pour moi. La seule solution que j'ai trouvée est d'additionner toutes les tailles de largeur minimale et de les appliquer à l'ensemble du tableau. Cela ne fonctionne évidemment que si vous connaissez à l'avance toutes les tailles des colonnes, ce qui est le cas pour moi. Mes tableaux ressemblent à quelque chose comme ceci :

var columns = [
  {label: 'Column 1', width: 80 /* plus other column config */},
  {label: 'Column 2', minWidth: 110 /* plus other column config */},
  {label: 'Column 3' /* plus other column config */},
];

const minimumTableWidth = columns.reduce((sum, column) => {
  return sum + (column.width || column.minWidth || 0);
}, 0);

tableElement.style.minWidth = minimumTableWidth + 'px';

Il s'agit d'un exemple et non d'un code recommandé. Adaptez l'idée à vos besoins. Par exemple, le code ci-dessus est en javascript et ne fonctionnera pas si l'utilisateur a désactivé JS, etc.