Beispiel zum Ändern des Zeilenabstands einer HTML-Tabelle

Bei der Verwendung von HTML-Tabellen müssen wir manchmal den Zeilenabstand ändern, aber das Ändern von Rändern, Auffüllungen, Kollabieren und anderen Methoden ist nicht sehr effektiv. Hier habe ich einen nützlichen kleinen Trick gefunden. Verwenden Sie das Anzeigeattribut + Rand, um dies zu erreichen.
Beispiel:

tr{margin-top:0px;padding:0px;display:block;}

Werfen wir einen Blick auf den Vergleich

tr{margin-top:-10px;padding:0px;display:block;}

Man erkennt deutlich, dass der Zeilenabstand stark verkürzt wurde.

Andere Lösungen

Frage:

Die Standardanzeige von tr in der Tabelle ist display:table-row. Sie kann zwar in display:block geändert werden, verliert dabei aber die einzigartigen Anzeigeeffekte von tr, wie z. B. (automatische Ausrichtung von td);

Und es ist nützlich, in tr eine Polsterung festzulegen, die den inneren Rand vergrößern kann, aber es ist sinnlos, einen Rand festzulegen, da der äußere Abstand von tr immer noch 0 ist.

Lösung:

Zwei CSS-Eigenschaften: border-collapse:collapse / separate & border-spacing:10px 10px;

Um den Abstand von tr zu steuern, müssen Sie „Border-Collapse“ und „Border-Spacing“ verwenden.

wie:

<table style="border-collapse:separate; border-spacing:10px;">
    <tr></tr>
</Tabelle>

Dies ist das Ende dieses Artikels mit Beispielen zum Ändern des Zeilenabstands von HTML-Tabellen. Weitere relevante Inhalte zum Zeilenabstand von HTML-Tabellen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!