Methode 1: Verwendung des HTML-Attributs „width“.
Der ' Breite „ ist ein grundlegendes Attribut, das von HTML bereitgestellt wird. Es legt die Breite oder horizontale Länge des HTML-Elements fest. Um Tabellendaten zu korrigieren, wird in den folgenden Schritten das Breitenattribut verwendet.
Schritt 1: Erstellen Sie eine Tabelle Schritt 2: Fügen Sie CSS-Eigenschaften zum „table“-Element hinzu Schritt 3: Zuweisen von Eigenschaften zum „td“-Element Schritt 4: Zuweisen von Eigenschaften zum „th“-Element Die Ausgabe wird wie folgt angezeigt: Der obige Schnappschuss zeigt, dass alle Spaltenbreiten auf jeweils 30 % festgelegt sind. Die CSS-Eigenschaft nth-child() wird zum Erstellen einer Tabelle mit fester Breite verwendet. Diese Eigenschaft ruft die Spaltennummer ab und wählt das „ Die Ausgabe des obigen Codeblocks ist: Diese Ausgabe zeigt, dass die Spaltennummern 1 und 3 auf die Breite von 10 % festgelegt sind. Innerhalb der „ Tisch Fügen Sie im Abschnitt „CSS“ den Abschnitt „ Tabellenlayout: behoben ”-Eigenschaft zum Festlegen der „Breite“ von Datentabellenelementen: Fügen Sie in der HTML-Datei das „ Nach der Ausführung des obigen Codeausschnitts lautet die Ausgabe: Auf diese Weise kann der Benutzer die Breite der Um die Breite der Tabellendaten festzulegen, verwenden Sie „ Breite „Attribut“, „ n-tes Kind( ) ” Trennzeichen und „
Verwenden Sie in der HTML-Datei ein „ ' Und ' ”-Tags und schreiben Sie Daten hinein:
< Center >
< Tisch >
< tr >
< Th > Name < / Th >
< Th > Status < / Th >
< Th > Raum Nummer < / Th >
< / tr >
< tr >
< td > Sachar < / td >
< td > Student < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Student < / td >
< td > 06 < / td >
< / tr >
< / Tisch >
< / Center >
Verwenden Sie den Tabellenelementselektor in CSS und fügen Sie „ Grenze ” von 1 Pixel durchgehend rot, „ Textausrichtung „ richtet den Text zentriert aus und „ Breite ”, das die Gesamtbreite der Tabelle auf 80 % setzt:
Tisch {
Grenze : 1 Pixel durchgehend rot;
Text- ausrichten : Center;
Breite : 80 %; }
Benutzen Sie die „ td ” Elementselektor und legt die „ Rand unten ” von 5px einfarbig rot, „ Polsterung ” von 20 Pixel, um das Element hervorzuheben, und „ Breite ” setzt auf 30 %:
td {
Rand unten: 5 Pixel durchgehend rot;
Polsterung:20px;
Breite : 30 %;
}
Benutzen Sie die „ Th ” Elementselektor zum Ändern der Farbe von „ Rand unten ” von Rot zu Meeresgrün, um eine bessere Visualisierung zu erreichen:
Th {
Rand unten: 5 Pixel einfarbiges Seegrün;
Polsterung:20px;
Breite : 30 %;
}
Methode 2: Verwendung des „nth-child( )“-Selektors
' Und ' ' Stichworte. Die Breite beträgt beispielsweise „ Fest „nur für Spaltennummern“ 1 ' Und ' 3 “. Jede dieser Spalten erhält eine Breite von 10 %. In diesem Artikel wurde erfolgreich gezeigt, wie die Breite der Datentabelle korrigiert wird. td:ntes-Kind ( 3 ) {
Breite : 10 %;
}
th:ntes-Kind ( 1 ) {
Breite : 10 %;
}
Methode 3: Verwenden des
Tabellenlayout: fest;
Breite : 80 %;
Grenze : 1 Pixel durchgehend rot;
Text- ausrichten : Center;
}
< Kol Stil = „Breite: 15 %;“ / >
< Kol Stil = „Breite: 30 %;“ / >
-Elemente der Tabellendaten festlegen.
Abschluss
-Elementen korrigiert wird.