อย่างไรและทำไมต้องใช้ “display: table-cell” ใน CSS

สังเกตได้ว่าเพิ่มข้อมูลสำเร็จแล้ว:

ขั้นตอนที่ 2: สไตล์คอนเทนเนอร์ 'เนื้อหาตาราง'

ในการเข้าถึง div หลัก ให้ใช้ปุ่ม “ #สารบัญ ', ที่ไหน ' # ” เป็นตัวเลือกที่ใช้สำหรับการเข้าถึงที่ระบุ “ รหัส ” แอตทริบิวต์ของคอนเทนเนอร์ div จากนั้นใช้คุณสมบัติต่อไปนี้:

ที่นี่:

• • “ แสดง ” คุณสมบัติกำหนดและกำหนดลักษณะขององค์ประกอบ ในการทำเช่นนั้น ค่าของคุณสมบัตินี้จะถูกตั้งค่าเป็น “ โต๊ะ ” สำหรับทำโต๊ะ
  • “ การขยายความ ” จัดสรรพื้นที่ภายในคอนเทนเนอร์

ขั้นตอนที่ 3: สไตล์คอนเทนเนอร์ “tr-div”

ตอนนี้สไตล์ ' TR-div ” คอนเทนเนอร์ ดังนี้

ตามบล็อกรหัสด้านบน ' แสดง ” ค่าคุณสมบัติถูกกำหนดเป็น “ ตารางแถว ” ซึ่งหมายถึงข้อมูลถูกตั้งค่าในรูปแบบของแถวในตาราง “ สีพื้นหลัง คุณสมบัติ ” ใช้สำหรับระบุสีที่ด้านหลังองค์ประกอบ และสุดท้าย “ การขยายความ ” นำไปใช้:

ขั้นตอนที่ 4: ใช้คุณสมบัติ “display: table-cell” บนคอนเทนเนอร์ “td-div”

เข้าถึง div ที่สามด้วยความช่วยเหลือของ “ .td-div ” เลือกจุดและรหัสที่เกี่ยวข้อง และใช้คุณสมบัติ CSS ที่ระบุด้านล่าง:

• • มูลค่าของ “ แสดง ” คุณสมบัติถูกตั้งค่าเป็น “ ตารางเซลล์ ” ซึ่งใช้สำหรับสร้างเซลล์และเพิ่มข้อมูลลงในเซลล์
  • “ ความกว้าง ” ระบุขนาดของเซลล์ตารางในแนวนอน
  • “ ชายแดน ” กำหนดขอบเขตรอบเซลล์
  • “ ขอบ ” คุณสมบัติจัดสรรพื้นที่นอกขอบเขตที่กำหนด
  • “ การขยายความ ” ระบุช่องว่างภายในขอบเขต

เอาต์พุต

เหตุใดจึงต้องใช้ 'display: table-cell' ใน CSS

“ จอแสดงผล: ตารางเซลล์ ” คุณสมบัติ CSS ใช้สำหรับตั้งค่าการแสดงข้อมูลที่ทำให้องค์ประกอบทำงานเหมือนตาราง ดังนั้น ผู้ใช้จึงสามารถสร้างตารางซ้ำใน HTML ได้โดยไม่ต้องใช้องค์ประกอบตารางและองค์ประกอบอื่นๆ รวมถึง td และ tr โดยเฉพาะอย่างยิ่งคุณสมบัติของเขากำหนดข้อมูลในรูปแบบของตาราง

บทสรุป

เมื่อต้องการใช้ “ จอแสดงผล: ตารางเซลล์ ” คุณสมบัติ CSS สร้างคอนเทนเนอร์ div ที่ซ้อนกัน และแทรกคลาสในแต่ละคอนเทนเนอร์ด้วยชื่อเฉพาะ จากนั้น เข้าถึงคอนเทนเนอร์ div ใน CSS และใช้คุณสมบัติ “display: table-cell” โดยที่ “ แสดง คุณสมบัติ ” ใช้สำหรับตั้งค่าข้อมูลในเซลล์ตาราง โพสต์นี้สาธิตวิธีการใช้คุณสมบัติ display:table-cell CSS