Réglage de la hauteur de ligne de la table

137

J'ai ce code: 

<table class="topics" >
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>

        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

Les rangées sont trop espacées. Je veux que les lignes se rapprochent.

Ce que j'ai fait, c'est d'ajouter le CSS suivant mais cela ne semble rien changer. 

.topics tr { height: 14px; }

Qu'est-ce que je fais mal?

html css Hiromi Nagashim
la source
En relation: stackoverflow.com/questions/2092696/how-to-fix-height-of-tr
Thilo

Réponses:

166

essaye ça:

.topics tr { line-height: 14px; }

Refaelos
la source
160
Je ne comprends pas pourquoi cela a tant de votes, cela ne résout pas le problème. Cela ne fonctionne que si vous n'avez qu'une seule ligne de texte dans le fichier tr. Cette solution définit la hauteur de la ligne , pas la trhauteur.
BenR
2
Comme mentionné dans un commentaire ultérieur. la hauteur doit être supérieure à la hauteur de votre plus grand contenu. Sinon, il utilisera simplement la hauteur du contenu le plus grand comme hauteur minimale. Et oui, cela ne fonctionne que pour une seule ligne de texte.
Varun Chatterji
1
Il n'est utile que dans le cas d'un texte d'une seule ligne.
shekhardtu
23

essayez de définir l'attribut pour td ainsi:

.topic td{ height: 14px };
Dave
la source
10
Ne semble pas fonctionner (Chromium 12 / Ubuntu 11.04) .
David dit de réintégrer Monica le
1
sérieusement? Je pensais que cela aurait toujours fonctionné. c'est certainement le cas maintenant. de toute façon, c'est la solution que j'ai trouvée la meilleure puisque la façon dont les cellules de tableau fonctionnent est d'étendre leur contenu. donc heightdans a tdest effectivement une hauteur min, ce qui dans ce cas est en fait ce que vous voulez
Simon_Weaver
@dave Dans mon cas, seule @davela solution a fonctionné. line-heightne fonctionnait ni avec trni td. Je ne sais pas si cela a quelque chose à voir avec le timing puisque le message original a six ans et certaines règles html / css peuvent avoir changé maintenant car la plupart des navigateurs utilisent maintenant HTML5.
nam
De plus, d'après mon expérience , si vous définissez une hauteur sur tr puis une hauteur de 100% ou n'importe quelle hauteur sur le td à l'intérieur, je crois que le système pense que la hauteur est définie sur le td et qu'elle ne suit pas la hauteur du td. tr et la ligne est définie sur la hauteur par défaut. Donc, réglez simplement la hauteur sur le td. C'est la raison pour laquelle j'ai voté pour cette réponse
user3245268
9

Vous pouvez également supprimer un espacement supplémentaire si vous placez une border-collapse: collapse;instruction CSS sur votre table.

fijter
la source
6

J'ai trouvé que la meilleure réponse pour mes besoins était d'utiliser: 

.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}

Le white-space: nowrapest important car il empêche les cellules de votre ligne de se briser sur plusieurs lignes.

Personnellement, j'aime ajouter text-overflow: ellipsisà mes éléments thet tdpour rendre le texte qui déborde plus joli en ajoutant les points de fin, par exempleToo long gets dots...

Tom Dickman
la source
5

line-height ne fonctionne que lorsqu'elle est plus grande que la hauteur actuelle du contenu de <td>. Donc, si vous avez une icône 50x50 dans le tableau, la trhauteur de ligne ne rendra pas une ligne inférieure à 50px (+ remplissage).

Puisque vous avez déjà défini le remplissage, 0il doit s'agir de quelque chose d'autre,
par exemple une grande taille de police à l'intérieur tdqui est plus grande que votre 14px.

Alex
la source
5

Si vous utilisez Bootstrap, regardez paddingvos tds.

1 homme
la source
1

une fois que j'ai besoin de fixer la hauteur d'une ligne de valeur particulière en utilisant le CSS en ligne comme suit.

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>
Md. Shafiqur Rahman
la source
1

Quant à moi, j'ai décidé d'utiliser des rembourrages. Ce n'est pas exactement ce dont vous avez besoin, mais cela peut être utile dans certains cas.

table td {
    padding: 15px 0;
}
Eugène Porodko
la source