Comment puis-je forcer la ligne de la table d'en-tête à la même hauteur que les autres lignes de la table?

Question

Je veux que toutes mes lignes, même ma rangée d'en-tête de table, aient la même hauteur. J'ai ajouté à mon stylesheet

#currencyTable tr { 
    text-align: left; 
    min-height: 30px; 
} 

mais si vous regardez mon violon - https://jsfiddle.net/4qmmeqsk/, vous remarquerez la ligne d'en-tête n'est pas la même hauteur que les autres lignes (au moins il n'a pas la même rembourrage). Comment faire pour que la ligne d'en-tête soit de la même hauteur que mes autres lignes de table?

Answer 1

Juste donner votre e même rembourrage td:

padding: 12px; 

ou:

padding: 12px 0; // top and bottom 

Pour votre projet:

th {  
    padding: 12px 0; 
} 

Si vous voulez garder plus le fond , marge d'utilisation:

margin: 12px; 

ou:

margin: 12px 0; // top and bottom 

Pour votre projet:

th {  
    margin: 12px 0; 
} 

Answer 2

Le css n'a pas vraiment "min-height" faire quoi que ce soit, il est plus utile pour la conception réactive. Vous pouvez définir une hauteur absolue, avec une hauteur maximale, ou augmenter le remplissage. Ajoutez un style `th` à votre CSS et donnez-lui soit un remplissage ou une hauteur.

#currencyTable tr,th { height: 30px; max-height: ...px; }