Einstellen der Tabellenzeilenhöhe

135

Ich habe diesen 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>

Die Reihen sind zu weit voneinander entfernt. Ich möchte, dass die Linien näher beieinander liegen.

Was ich getan habe, war das folgende CSS hinzuzufügen, aber es scheint nichts zu ändern.

.topics tr { height: 14px; }

Was mache ich falsch?

html css

— Hiromi Nagashim
quelle

Siehe auch

— Thilo

163

Versuche dies:

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

— Refaelos
quelle

160

Ich verstehe nicht, warum dies so viele Stimmen hat, es löst das Problem nicht. Es funktioniert nur, wenn Sie nur 1 Textzeile in der tr. Diese Lösung setzt die Linie Höhe, nicht die trHöhe.

— BenR

2

Wie in einem späteren Kommentar erwähnt. Die Höhe muss größer sein als die Höhe Ihres größten Inhalts. Andernfalls wird nur die Höhe des größten Inhalts als Mindesthöhe verwendet. Und ja, das funktioniert nur für eine Textzeile.

— Varun Chatterji

1

Dies ist nur bei einzeiligem Text sinnvoll.

— Shekhardtu

23

Versuchen Sie, das Attribut so td einzustellen:

.topic td{ height: 14px };

— Dave
quelle

10

Nicht scheinen zu arbeiten (Chromium 12 / Ubuntu 11.04) .

— David sagt, Monica am

1

Ernsthaft? Ich dachte, das hätte immer funktioniert. das tut es jetzt sicher. Auf jeden Fall ist dies die Lösung, die ich als die beste empfunden habe, da Tabellenzellen so funktionieren, dass sie auf ihren Inhalt erweitert werden. so heightin einem tdeffektiv min-height wird, die in diesem Fall ist eigentlich das, was Sie wollen

— Simon_Weaver

@ Dave In meinem Fall hat auch nur @davedie Lösung funktioniert. line-heightfunktionierte weder mit trnoch td. Ich bin mir nicht sicher, ob es etwas mit dem Timing zu tun hat, da der ursprüngliche Beitrag sechs Jahre alt ist und sich einige der HTML / CSS-Regeln inzwischen geändert haben, da die meisten Browser jetzt HTML5 verwenden.

— Nam

Auch in meiner Erfahrung , wenn Sie eine Höhe auf tr und dann einer 100% Höhe oder jede Höhe auf dem td Innern gesetzt, glaube ich , das System denkt , dass die Höhe auf der td gesetzt ist und es nicht folgen Höhe der tr und die Zeile wird auf die Standardhöhe gesetzt. Stellen Sie einfach die Höhe auf dem td ein. Dies ist der Grund, warum ich diese Antwort

— positiv

9

Sie können auch zusätzliche Abstände entfernen, wenn Sie eine border-collapse: collapse;CSS-Anweisung in Ihre Tabelle einfügen.

— fijter
quelle

6

Ich fand die beste Antwort für meine Zwecke:

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

Das white-space: nowrap ist wichtig, da es verhindert, dass die Zellen Ihrer Zeile über mehrere Zeilen hinweg brechen.

Ich persönlich füge gerne text-overflow: ellipsismeine thund tdElemente hinzu, damit der überlaufende Text schöner aussieht, indem ich zum Beispiel die nachfolgenden Punktstopps hinzufügeToo long gets dots...

— Tom Dickman
quelle

5

Die Zeilenhöhe funktioniert nur, wenn sie größer ist als die aktuelle Höhe des Inhalts von <td>. Wenn Sie also ein 50x50-Symbol in der Tabelle haben, wird durch die trZeilenhöhe eine Zeile nicht kleiner als 50px (+ Auffüllung).

Da Sie das Auffüllen bereits so eingestellt haben, 0muss es sich um etwas anderes handeln,
z. B. eine große Schriftgröße im Inneren td, die größer als Ihre 14 Pixel ist.

— Alex
quelle

5

Wenn Sie Bootstrap verwenden, schauen Sie sich paddingIhre tds an.

— 1man
quelle

1

Sobald ich die Höhe einer bestimmten Wertzeile mithilfe von Inline-CSS wie folgt festlegen muss.

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>

— Md. Shafiqur Rahman
quelle

1

Ich habe mich für Polster entschieden. Es ist nicht genau das, was Sie brauchen, kann aber in einigen Fällen nützlich sein.

table td {
    padding: 15px 0;
}

— Eugene Porodko
quelle