CSS: Fixed row height
je vais avoir cette balise:
<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 dont j'ai besoin, c'est que les rangées ne s'étirent pas en hauteur. Est-il un moyen d'avoir une hauteur de ligne fixe?
5 réponses
HTML table les hauteurs de lignes changent généralement proportionnellement à la hauteur de la table, si la hauteur de la table est plus grande que la hauteur de vos lignes. Puisque la table force la hauteur de vos lignes, vous pouvez supprimer la hauteur de la table pour résoudre le problème. Si cela n'est pas acceptable, Vous pouvez également donner aux lignes la hauteur explicite, et ajouter une troisième ligne qui sera auto taille à la hauteur restante de la table.
une autre option dans CSS2 est la propriété Max-Height, bien qu'elle peut conduire à un comportement étrange dans un tableau.http://www.w3schools.com/cssref/pr_dim_max-height.asp
.
Simplement ajouter style="line-height:0" pour chaque cellule. Cela fonctionne dans IE parce qu'il fixe la ligne-hauteur du texte existant et non-existant à environ 19px et qui force les cellules à s'étendre verticalement dans la plupart des versions de IE. Que vous ayez ou non du texte, cela doit être fait pour que IE affiche correctement les lignes de moins de 20px de haut.
Vous pouvez également essayer, si c'est ce que vous avez besoin de:
<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>
Je ne l'ai pas essayé mais si vous mettez un div dans votre jeu de cellules de table de sorte qu'il aura des barres de défilement si nécessaire, alors vous pouvez insérer là, avec une hauteur fixe sur le div et il devrait garder votre rangée de table à une hauteur fixe.
table tbody
{
border:1px solid red;
}
table td
{
background:yellow;
border-bottom:1px solid green;
}
.tr0{
line-height:0;
}
.tr0 td{
background:red;
}<table>
<tbody>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr class="tr0"><td></td></tr>
</tbody>
</table>