Tabellenzeilenhöhe einstellen

Lesezeit: 4 Minuten

Benutzer-Avatar
Hiromi Nagashim

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 Zeilen sind zu weit voneinander entfernt. Ich möchte, dass die Linien näher beieinander liegen.

Ich habe das folgende CSS hinzugefügt, aber es scheint nichts zu ändern.

.topics tr { height: 14px; }

Was mache ich falsch?

  • Siehe auch: stackoverflow.com/questions/2092696/how-to-fix-height-of-tr

    – Thilo

    27. Juli 2016 um 0:22 Uhr

Benutzer-Avatar
refaelos

Versuche dies:

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

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

    – BenR

    3. Juni 2014 um 15:23 Uhr


  • 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

    7. Juni 2016 um 17:33 Uhr


  • Es ist nur bei einzeiligem Text sinnvoll.

    – shekhardtu

    31. Mai 2018 um 17:16 Uhr


versuchen Sie, das Attribut für festzulegen td
Also:

.topic td{ height: 14px };

  • Nicht erscheinen funktionieren (Chromium 12/Ubuntu 11.04).

    – David Thomas

    18. Juni 2011 um 18:58 Uhr

  • Ernsthaft? Ich dachte, das hätte immer funktioniert. jetzt tut es das auf jeden Fall. Wie auch immer, dies ist die Lösung, die ich für am besten halte, da die Funktionsweise von Tabellenzellen darin besteht, ihren Inhalt zu erweitern. Also height in einem td ist effektiv min-height, was in diesem Fall eigentlich das ist, was Sie wollen

    – Simon_Weaver

    3. August 2014 um 23:21 Uhr

  • @dave In meinem Fall auch nur @daveDie Lösung von hat funktioniert. line-height ging auch nicht mit tr oder 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 möglicherweise inzwischen geändert haben, da die meisten Browser jetzt HTML5 verwenden.

    – Nam

    27. August 2017 um 15:18 Uhr


  • Ebenfalls, durch meine Erfahrung, wenn Sie eine Höhe auf tr und dann eine 100% ige Höhe oder eine beliebige Höhe auf dem darin enthaltenen td festlegen, glaube ich, dass das System denkt, dass die Höhe auf dem td festgelegt ist und nicht der Höhe des tr und der Reihe folgt auf die Standardhöhe setzen. Stellen Sie also einfach die Höhe auf dem td ein. Dies ist der Grund, warum ich diese Antwort positiv bewertet habe

    – Benutzer3245268

    26. Februar 2019 um 15:46 Uhr

Benutzer-Avatar
Tom Dickman

Ich fand die beste Antwort für meine Zwecke war zu verwenden:

.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 brechen.

füge ich persönlich gerne hinzu text-overflow: ellipsis zu meinem th und td Elemente, um den überfließenden Text schöner aussehen zu lassen, indem Sie zum Beispiel die nachgestellten Punkte hinzufügen Too long gets dots...

Sie können auch einige zusätzliche Abstände entfernen, wenn Sie a platzieren border-collapse: collapse; CSS-Anweisung auf Ihrer Tabelle.

Zeilenhöhe funktioniert nur, wenn sie größer ist als die aktuelle Höhe des Inhalts von <td> . Wenn Sie also ein 50×50-Symbol in der Tabelle haben, wird das tr line-height macht eine Zeile nicht kleiner als 50px (+ padding).

Da hast du die Polsterung schon eingestellt 0 es muss etwas anderes sein,
zum Beispiel eine große Schriftgröße im Inneren td das ist größer als Ihre 14px.

Benutzer-Avatar
Eugen Porodko

Was mich betrifft, habe ich 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;
}

Benutzer-Avatar
1 Mann

Wenn Sie Bootstrap verwenden, schauen Sie sich an padding von dir tds.

1334230cookie-checkTabellenzeilenhöhe einstellen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy