web-dev-qa-db-fra.com

CSS: hauteur de ligne fixe

J'ai 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 dont j'ai besoin, c'est que les rangées ne s'étirent pas en hauteur .. Est-il possible d'avoir une hauteur de rangée fixe?

csshtml-tablerow
23
Fuxi

Les hauteurs de ligne de tableau HTML changent généralement proportionnellement à la hauteur de la table, si la hauteur de la table est supérieure à la hauteur de vos lignes. La table forçant la hauteur de vos lignes, vous pouvez la supprimer pour résoudre le problème. Si cela n'est pas acceptable, vous pouvez également donner aux lignes une hauteur explicite et ajouter une troisième ligne qui sera auto taille à la hauteur restante de la table. 

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

. 

27
PortageMonkey

Ajoutez simplement style="line-height:0" à chaque cellule. Cela fonctionne dans IE car il définit la hauteur de ligne du texte existant et non existant à environ 19 pixels et oblige les cellules à se développer verticalement dans la plupart des versions d'IE. Que vous ayez ou non du texte, cela doit être fait pour IE afin d'afficher correctement les lignes de moins de 20 pixels de haut. 

23
horseFeathers

Vous pouvez aussi essayer ceci, 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>
7
jerjer

Je ne l'ai pas essayée, mais si vous mettez une div dans votre ensemble de cellules de table de manière à avoir des barres de défilement si nécessaire, vous pourrez alors l'insérer, avec une hauteur fixe sur la div et conserver la rangée de votre tableau à une valeur fixe. la taille.

4
James Black

    
    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>

0
Waruna Manjula