CSS: Correction hauteur de ligne

Question

Je vais avoir ce balisage:

<style> 
    table 
    { 
     border:1px solid black; 
     width:400px; 
     height:300px; 
     border-collapse:collapse; 
    } 
    table tbody 
    { 
     border:1px solid red; 
    } 
    table td 
    { 
     background:yellow; 
     padding:10px; 
     border-bottom:1px solid green; 
     height:20px; 
    } 
</style> 


<table> 
<tbody> 
    <tr><td>test</td></tr> 
    <tr><td>test</td></tr> 
</tbody> 
</table> 

Ce que j'ai besoin est que les lignes ne seront pas étirer en hauteur. Y a-t-il un moyen d'avoir une hauteur de rangée fixe?

Answer 1

HTML Les hauteurs de ligne du tableau changent généralement proportionnellement à la hauteur de la table, si la hauteur de la table est supérieure à la hauteur de vos lignes. Étant donné que la table force la hauteur de vos lignes, vous pouvez supprimer la hauteur de la table pour résoudre le problème. Si ce n'est pas acceptable, vous pouvez également donner une hauteur explicite aux lignes, et ajouter une troisième ligne qui va auto taille à la hauteur de la table restante.

Une autre option dans CSS2 est la propriété Max-Height, bien qu'elle puisse conduire à un comportement étrange dans une table. http://www.w3schools.com/cssref/pr_dim_max-height.asp

.

Answer 2

Je ne l'ai pas essayé mais si vous mettez un div dans votre cellule de table de sorte qu'il aura des barres de défilement si nécessaire, alors vous pourriez insérer là, avec une hauteur fixe sur le div et il devrait garder votre table ramer à une hauteur fixe.

Answer 3

Vous pouvez également essayer cela, si c'est ce dont vous avez besoin:

<style type="text/css"> 
    .... 
    table td div {height:20px;overflow-y:hidden;} 
    table td.col1 div {width:100px;} 
    table td.col2 div {width:300px;} 
</style> 


<table> 
<tbody> 
    <tr><td class="col1"><div>test</div></td></tr> 
    <tr><td class="col2"><div>test</div></td></tr> 
</tbody> 
</table> 

Answer 4

ajouter simplement style="line-height:0" à chaque cellule. Cela fonctionne dans IE car il définit la hauteur de ligne du texte existant et inexistant à environ 19px et qui force les cellules à se développer verticalement dans la plupart des versions de IE. Indépendamment du fait que vous ayez ou non du texte, cela doit être fait pour que IE affiche correctement les lignes de moins de 20 px de haut.