- Χρήση HTML ' πλάτος ' Χαρακτηριστικό
- Χρησιμοποιώντας ' nth-child() ” Επιλογέας
- Χρησιμοποιώντας '
'Ετικέτα
Μέθοδος 1: Χρήση του χαρακτηριστικού “width” HTML
Ο ' πλάτος ” είναι ένα βασικό χαρακτηριστικό που παρέχεται από την HTML. Ορίζει το πλάτος ή το οριζόντιο μήκος του στοιχείου HTML. Για τη διόρθωση δεδομένων πίνακα, το χαρακτηριστικό width χρησιμοποιείται στα παρακάτω βήματα.
Βήμα 1: Δημιουργήστε έναν πίνακα Βήμα 2: Προσθέστε ιδιότητες CSS στο στοιχείο 'πίνακας'. Βήμα 3: Εκχώρηση Ιδιοτήτων στο στοιχείο 'td'. Βήμα 4: Εκχώρηση Ιδιοτήτων στο στοιχείο 'th'. Η έξοδος εμφανίζεται ως: Το παραπάνω στιγμιότυπο δείχνει ότι όλα τα πλάτη των στηλών έχουν καθοριστεί στο 30% το καθένα. Η ιδιότητα nth-child() του CSS χρησιμοποιείται για τη δημιουργία ενός πίνακα σταθερού πλάτους. Αυτή η ιδιότητα παίρνει τον αριθμό της στήλης και επιλέγει το ' Η έξοδος του παραπάνω μπλοκ κώδικα είναι: Αυτή η έξοδος δείχνει ότι οι αριθμοί στηλών 1 και 3 είναι σταθεροί στο πλάτος 10%. Μεσα στην ' τραπέζι ' ενότητα στο τμήμα CSS προσθέστε το ' διάταξη πίνακα: σταθερή ' ιδιότητα για να ορίσετε το 'πλάτος' των στοιχείων πίνακα δεδομένων: Στο αρχείο HTML, προσθέστε το ' Μετά την εκτέλεση του παραπάνω αποσπάσματος κώδικα, η έξοδος είναι: Αυτός είναι ο τρόπος με τον οποίο ο χρήστης μπορεί να διορθώσει το πλάτος των στοιχείων πίνακα δεδομένων Για να διορθώσετε το πλάτος των δεδομένων πίνακα, χρησιμοποιήστε το ' πλάτος ' Χαρακτηριστικό, ' nth-child( ) 'διαχωριστής, και'
Στο αρχείο HTML, χρησιμοποιήστε ένα ' <κέντρο> ετικέτα για να εμφανίσετε κάθε στοιχείο μέσα σε αυτό στο κέντρο της ιστοσελίδας. Μέσα σε αυτό, κατασκευάστε έναν πίνακα χρησιμοποιώντας το ' <πίνακας> '' ' και ' ” προσθέτει ετικέτες και γράφει δεδομένα σε αυτό:
< κέντρο >
< τραπέζι >
< tr >
< ου > Ονομα < / ου >
< ου > Κατάσταση < / ου >
< ου > Αριθμός δωματίου < / ου >
< / tr >
< tr >
< td > Fakhar < / td >
< td > Μαθητης σχολειου < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Ομάρ < / td >
< td > Μαθητης σχολειου < / td >
< td > 06 < / td >
< / tr >
< / τραπέζι >
< / κέντρο >
Χρησιμοποιήστε τον επιλογέα στοιχείων πίνακα στο CSS και προσθέστε το ' σύνορο ' από 1 px συμπαγές κόκκινο, ' στοίχιση κειμένου ' ευθυγραμμίζει το κείμενο στο κέντρο και ' πλάτος ' που ορίζει το συνολικό πλάτος του πίνακα στο 80%:
τραπέζι {
σύνορο : 1px συμπαγές κόκκινο;
κείμενο- ευθυγραμμίζω : κέντρο;
πλάτος : 80 %; }
Χρησιμοποιήστε το ' td ' επιλογέας στοιχείων και ορίζει το ' σύνορο-κάτω ” από 5 εικονοστοιχεία συμπαγές κόκκινο, ” υλικό παραγεμίσματος ' των 20 εικονοστοιχείων για να γίνει πιο εμφανές το αντικείμενο και ' πλάτος ” ορίζεται ως 30%:
td {
περίγραμμα-κάτω: 5 εικονοστοιχεία συμπαγές κόκκινο.
padding:20px;
πλάτος : 30 %;
}
Χρησιμοποιήστε το ' ου ' επιλογέας στοιχείων για αλλαγή του χρώματος ' σύνορο-κάτω ” από κόκκινο σε πράσινο της θάλασσας για να δημιουργήσετε μια καλύτερη οπτικοποίηση:
ου {
περίγραμμα-κάτω: 5px συμπαγές θαλασσινό πράσινο;
padding:20px;
πλάτος : 30 %;
}
Μέθοδος 2: Χρησιμοποιώντας τον επιλογέα “nth-child( )”.
' και ' ετικέτες '. Για παράδειγμα, το πλάτος είναι ' σταθερός 'μόνο για αριθμούς στηλών' 1 ' και ' 3 '. Κάθε μία από αυτές τις στήλες αποκτά πλάτος 10%. Αυτό το άρθρο έχει δείξει με επιτυχία πώς να διορθώσετε το πλάτος του πίνακα δεδομένων. td:nth-child ( 3 ) {
πλάτος : 10 %;
}
th:nth-child ( 1 ) {
πλάτος : 10 %;
}
Μέθοδος 3: Χρήση ετικέτας
διάταξη πίνακα: σταθερό;
πλάτος : 80 %;
σύνορο : 1px συμπαγές κόκκινο;
κείμενο- ευθυγραμμίζω : κέντρο;
}
< διάσελο στυλ = 'πλάτος: 15%;' / >
< διάσελο στυλ = 'πλάτος: 30%;' / >
.
συμπέρασμα
.