ישנם מספר מאפייני CSS לעיצוב רכיבי HTML. ה ' לְהַצִיג ' מאפיין הוא אחד מהם, המשמש להגדרת האלמנט המנוהל כאלמנט מוטבע או כאלמנט בלוק. יתר על כן, הפריסה המשמשת עבור ילדיה, כגון זרימה, גמישות או רשת. יתר על כן, מאפיין זה מקצה את הסוגים הפנימיים והחיצוניים להצגת אלמנט.
הפוסט הזה יסביר:
כיצד להשתמש ב-'display: table-cell' ב-CSS?
כדי להשתמש ב' לְהַצִיג 'נכס עם הערך' תא שולחן ', נסה את ההוראות שניתנו.
שלב 1: צור מיכלי div מקוננים
ראשית, צור את מיכל ה-div הראשי בעזרת ה-' כדי לגשת ל-div הראשי, השתמש ב-' #תוכן שולחן ', איפה ' # ' הוא בורר המשמש לגישה ל' שצוין תְעוּדַת זֶהוּת ' התכונה של מיכל ה-div. לאחר מכן, החל את המאפיינים הבאים: שלב 3: סגנון מיכל 'tr-div'. עכשיו, סגנון את ' tr-div ' מיכל באופן הבא: תְפוּקָה ה ' תצוגה: תא טבלה מאפיין CSS משמש להגדרת תצוגה לנתונים שגורמים לאלמנט להתנהג כמו טבלה. לכן, משתמשים יכולים ליצור עותק של טבלה ב-HTML מבלי להשתמש באלמנט הטבלה ואלמנטים אחרים, כולל td ו-tr. ליתר דיוק, המאפיין שלו מגדיר את הנתונים בצורה של טבלה. כדי להשתמש ב' תצוגה: תא טבלה ” מאפיין CSS, צור מיכלי div מקוננים והכנס בכל קונטיינר מחלקה עם שם ספציפי. לאחר מכן, גש למיכל ה-div ב-CSS, והחל את המאפיין 'display: table-cell', כאשר ה-' לְהַצִיג 'מאפיין משמש להגדרת הנתונים בתאי הטבלה. פוסט זה הדגים את השיטה לשימוש במאפיין display:table-cell CSS.
< div תְעוּדַת זֶהוּת = 'תוכן שולחן' >
< div מעמד = 'tr-div' >
< div מעמד = 'td-div' > לְהָצִיק div >
< div מעמד = 'td-div' > HTML / CSS div >
div >
< div מעמד = 'tr-div' >
< div מעמד = 'td-div' > אדוארד div >
< div מעמד = 'td-div' > דוקר div >
div >
< div מעמד = 'tr-div' >
< div מעמד = 'td-div' > ג'ֵק div >
< div מעמד = 'td-div' > Git div >
div >
div >
ניתן לשים לב שהנתונים נוספו בהצלחה:
שלב 2: סגנון מיכל 'תוכן שולחן'.
תצוגה: שולחן;
ריפוד: 7 פיקסלים;
}
כאן:
תצוגה: שורה-שולחן;
צבע רקע: rgb ( 164 , 241 , 215 ) ;
ריפוד: 7 פיקסלים;
}
על פי בלוק הקוד לעיל, ' לְהַצִיג 'ערך המאפיין מוגדר כ' שורת שולחן ' כלומר הנתונים מוגדרים בצורה של שורות בטבלה, ' צבע רקע 'מאפיין משמש לציון הצבע בצד האחורי של האלמנט, ולבסוף, ' ריפוד 'מיושם:
שלב 4: החל את המאפיין 'display: table-cell' על מיכל 'td-div'.
תצוגה: תא טבלה;
רוחב: 150 פיקסלים;
גבול: #0f4bf0 מוצק 1px;
שוליים: 5 פיקסלים;
ריפוד: 7 פיקסלים;
}
גש לחלק השלישי בעזרת ' .td-div ' נקודה סלקטיבית ואת המזהה המתאים, והחל את מאפייני ה-CSS המפורטים להלן:
מדוע להשתמש ב-'display: table-cell' ב-CSS?
סיכום