CSS: Correction de la hauteur de ligne

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 dont j'ai besoin, c'est que les lignes ne s'étire pas en hauteur.
Est-il un moyen d'avoir une hauteur de ligne fixe?

  • Que voulez-vous faire avec le contenu qui est plus grand que la hauteur de ligne fixe?
  • Utilisation min-height, et j'espère que les utilisateurs n'ont pas IE6.
  • min-height n'est à l'exact opposé de ce qu'il a demandé. Notez également que max-hauteur ne fonctionne pas correctement dans certaines circonstances sous IE8, sauf si vous utilisez le mode de compatibilité: edskes.net/ie8overflowandexpandingboxbugs.htm
  • stackoverflow.com/questions/1554928/...
InformationsquelleAutor Fuxi | 2009-11-27
  1. 28

    HTML hauteurs de ligne de Table sera généralement change proportionnellement à la hauteur de la table, si la hauteur de la table est plus grande que la hauteur de vos lignes. Depuis, la table est de forcer 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 aussi donner les lignes explicite de la hauteur, et d'ajouter une troisième rangée qui auto taille pour le restant hauteur de la table.

    Une autre option dans CSS2, c'est le maximum de la Hauteur de la Propriété, même si elle peut conduire à un comportement étrange dans un tableau.http://www.w3schools.com/cssref/pr_dim_max-height.asp

    .

    • mieux. réponse. dur de réglage de la hauteur de la table a été la cause de tous mes problèmes, la suppression il a fait génial.
    • +1 pour le "vous pouvez aussi donner les lignes explicite de la hauteur, et d'ajouter une troisième ligne qui va de l'auto de taille pour le restant hauteur de la table."
    InformationsquelleAutor PortageMonkey
  2. 24

    Simplement ajouter style="line-height:0" à chaque cellule. Cela fonctionne sous IE, car il définit la hauteur de la ligne à la fois existant et non-existant texte à propos de 19px et qui force les cellules à s'étendre verticalement dans la plupart des versions de IE. Indépendamment de si oui ou non vous avez le texte de ce qui doit être fait pour IE pour afficher correctement les lignes de moins de 20 pixels de haut.

    • Cela viens de résoudre mon problème en Chrome 30 trop, j'ai essayé de faire un <img> prendre la taille totale de la cellule du tableau, il était sans lacunes
    • la hauteur de la ligne 0 semble rendre le texte courir ensemble, si elle tente d'enrouler: jsfiddle.net/6wXd8
    InformationsquelleAutor horseFeathers
  3. 7

    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>
    InformationsquelleAutor jerjer
  4. 4

    Je n'ai pas essayé, mais si vous mettez un div dans votre cellule de la table de jeu de sorte qu'il aura des barres de défilement si nécessaire, vous pouvez insérer là-bas, avec une hauteur fixe sur la div et il devrait garder votre ligne de la table à une hauteur fixe.

    InformationsquelleAutor James Black
  5. 0

    CSS:

        
    table tbody
    {
        border:1px solid red;
    }
    table td
    {
        background:yellow;
        
        border-bottom:1px solid green;
        
        
    }
    .tr0{
        line-height:0;
     }
     .tr0 td{
        background:red;
     }

    HTML:

    <table>
<tbody>
    <tr><td>test</td></tr>
    <tr><td>test</td></tr>    
    <tr class="tr0"><td></td></tr>
</tbody>
</table>

    InformationsquelleAutor Waruna Manjula