Hinzufügen von Polsterung zu Bootstrap -Tabellenzellen - CSS
Eine der Hauptkomponenten der Webentwicklung ist die Tabelle. Es wird die Daten in tabellarischer Form auf einer Website angezeigt. Wenn die Daten in den Tabellenzellen zu kurz oder zu lang sind, kann die Tabelle ungleichmäßig erscheint. Um dies zu korrigieren, die “PolsterungDie Eigenschaft wird für die Tabellenzellen verwendet.
Dieser Beitrag wird beschreiben:
- So fügen Sie Startstrap -Tabellenzellen Polster hinzu?
- So fügen Sie mit CSS die Polsterung zu Bootstrap -Tabellenzellen hinzu?
- So fügen Sie dem Tisch Polsterung hinzu?
Voraussetzung: Erstellen einer Tabelle
Befolgen Sie die unten genannten Schritte, um eine Tabelle zu erstellen:
- Verwenden Sie zuerst die “
Tag und zuweisen und es zuweisen "Tisch" Und "Tischstreifen" Klassen.
- Innerhalb der "
Element, geben Sie den Header -Teil an, indem Sie die “verwenden" Element.
- In darin erstellen eine Reihe “
”Von Überschriften, die die“ verwenden “ " Stichworte. - Erstellen Sie dann den Abschnitt "Tabellenkörper" mit dem "" Element.
- Zuletzt erstellen Sie Datenzeilen mit der “
”Tag und“ " Stichworte. Html
Name Kurs Punktzahl Jake Softwareentwicklung 90 Tina Einführung in Java 80 John Computersysteme 89 Ausgang
So fügen Sie Startstrap -Tabellenzellen Polster hinzu?
Eine Möglichkeit, die Polsterung in den Zellen der Tabelle hinzuzufügen, besteht darin, die Bootstrap -Polsterklassen zu verwenden. Diese beinhalten "P-*","px-*","py-*", und viele mehr.
Beispiel
Verwenden Sie im laufenden Beispiel die “PX-5Klasse, um die Polsterung links und rechts von den Überschriften hinzuzufügen:
Name Kurs Punktzahl Ausgang
So fügen Sie mit CSS die Polsterung zu Bootstrap -Tabellenzellen hinzu?
CSS bietet den einfachsten Weg, um die Polsterung in jeder Zelle der Tabelle mit der “hinzuzufügenPolsterung" Eigentum. Hier ist ein Beispiel, das zeigt, wie man jeder Tabellenzelle Polster hinzufügt:
.Tabelle TD
Polsterung: 30px;Ausgang
Bisher haben wir diskutiert, wie man Tabellenzellen Polster hinzufügt. Im kommenden Teil lernen Sie, wie Sie die Polsterung an den Tisch anpassen können.
So fügen Sie dem Tisch Polsterung hinzu?
Fügen Sie in CSS die unterbezeichneten Eigenschaften in die “hinzu“Tisch" Klasse:
.Tisch
Grenze: 2PX Solid Darkcyan;
Grenzkollapse: getrennt;
Polsterung: 20px;Hier:
- “GrenzeDas Eigentum fügt dem Element einen Rand hinzu.
- “Grenzkollapse"Mit dem Wert"getrennt”Fügt einen separaten Rand um den Tisch hinzu.
- “Polsterung”Fügt Platz für den Inhalt des Tisches hinzu.
Ausgang
Wir haben die Methoden zusammengestellt, um Stiefelstafelzellen Polster hinzuzufügen.
Abschluss
Es gibt verschiedene Möglichkeiten, um die Zellen einer Bootstrap -Tabelle Polster zu verleihen. Dazu gehören die Verwendung der Polsterklassen, wie zP-*","px-*", Und "py-*”. Insbesondere kann die Polsterung auch mit CSS hinzugefügt werden “Polsterung" Eigentum. In diesem Artikel wurde erklärt.
- Innerhalb der "