Πώς και γιατί να χρησιμοποιήσετε το 'display: table-cell' στο CSS

Μπορεί να παρατηρηθεί ότι τα δεδομένα έχουν προστεθεί με επιτυχία:

Βήμα 2: Δώστε στυλ σε κοντέινερ 'περιεχόμενο πίνακα'.

Για πρόσβαση στο main div, χρησιμοποιήστε το ' #πίνακας-περιεχόμενο ', που ' # ' είναι ένας επιλογέας που χρησιμοποιείται για πρόσβαση στο καθορισμένο ' ταυτότητα ” χαρακτηριστικό του κοντέινερ div. Στη συνέχεια, εφαρμόστε τις ακόλουθες ιδιότητες:

Εδώ:

• • Ο ' απεικόνιση Η ιδιότητα ” ορίζει και καθορίζει πώς φαίνεται ένα στοιχείο. Για να γίνει αυτό, η τιμή αυτής της ιδιότητας ορίζεται ως ' τραπέζι ” για να φτιάξετε το τραπέζι.
  • ' υλικό παραγεμίσματος ” κατανέμει το χώρο μέσα στο δοχείο.

Βήμα 3: Δώστε στυλ 'tr-div' Container

Τώρα, στυλ το ' tr-div ” δοχείο ως εξής:

Σύμφωνα με το παραπάνω μπλοκ κώδικα, το « απεικόνιση 'Η αξία του ακινήτου ορίζεται ως ' πίνακας-σειρά ' που σημαίνει ότι τα δεδομένα ορίζονται με τη μορφή σειρών σε έναν πίνακα, ' χρώμα του φόντου 'η ιδιότητα χρησιμοποιείται για τον καθορισμό του χρώματος στο πίσω μέρος του στοιχείου και, τέλος, ' υλικό παραγεμίσματος ' εφαρμόζεται:

Βήμα 4: Εφαρμόστε την ιδιότητα 'display: table-cell' στο κοντέινερ 'td-div'

Πρόσβαση στο τρίτο div με τη βοήθεια του ' .td-div ' dot Selective και το αντίστοιχο id, και εφαρμόστε τις ιδιότητες CSS που δίνονται παρακάτω:

• • Η αξία του « απεικόνιση Η ιδιοκτησία έχει οριστεί ως ' πίνακα-κελί ” το οποίο χρησιμοποιείται για τη δημιουργία του κελιού και την προσθήκη δεδομένων στο κελί.
  • ' πλάτος ” καθορίζει το μέγεθος του κελιού του πίνακα οριζόντια.
  • ' σύνορο ” ορίζει ένα όριο γύρω από τα κελιά.
  • ' περιθώριο Η ιδιότητα ” εκχωρεί το χώρο έξω από το καθορισμένο περίγραμμα.
  • ' υλικό παραγεμίσματος ” καθορίζει το χώρο στο εσωτερικό του ορίου.

Παραγωγή

Γιατί να χρησιμοποιήσετε το 'display: table-cell' στο CSS;

Ο ' οθόνη: πίνακας-κελί ” Η ιδιότητα CSS χρησιμοποιείται για τη ρύθμιση μιας εμφάνισης σε δεδομένα που κάνουν το στοιχείο να συμπεριφέρεται σαν πίνακας. Έτσι, οι χρήστες μπορούν να δημιουργήσουν ένα αντίγραφο ενός πίνακα σε HTML χωρίς να χρησιμοποιήσουν το στοιχείο του πίνακα και άλλα στοιχεία, Συμπεριλαμβανομένων των td και tr. Πιο συγκεκριμένα, η ιδιότητά του ορίζει τα δεδομένα σε μορφή πίνακα.

συμπέρασμα

Για να χρησιμοποιήσετε το « οθόνη: πίνακας-κελί ” Ιδιότητα CSS, δημιουργήστε ένθετα κοντέινερ div και εισαγάγετε μια κλάση σε κάθε κοντέινερ με ένα συγκεκριμένο όνομα. Στη συνέχεια, αποκτήστε πρόσβαση στο κοντέινερ div στο CSS και εφαρμόστε την ιδιότητα 'display: table-cell', όπου το ' απεικόνιση Η ιδιότητα ' χρησιμοποιείται για τη ρύθμιση των δεδομένων στα κελιά του πίνακα. Αυτή η ανάρτηση παρουσίασε τη μέθοδο για τη χρήση της ιδιότητας CSS display:table-cell.