Cách thức và lý do sử dụng “display: table-cell” trong CSS

Có thể nhận thấy rằng dữ liệu đã được thêm thành công:

Bước 2: Tạo kiểu cho vùng chứa “nội dung bảng”

Để truy cập div chính, hãy sử dụng “ #bảng nội dung ', Ở đâu ' # ” là một bộ chọn được sử dụng để truy cập vào “ nhận dạng ” thuộc tính của vùng chứa div. Sau đó, áp dụng các thuộc tính sau:

Đây:

• • Các ' trưng bày ” thuộc tính định nghĩa và xác định giao diện của một phần tử. Để làm như vậy, giá trị của thuộc tính này được đặt là “ bàn ” để làm cái bàn.
  • “ đệm ” phân bổ không gian bên trong vùng chứa.

Bước 3: Tạo kiểu vùng chứa “tr-div”

Bây giờ, tạo kiểu cho “ tr-div ” vùng chứa như sau:

Theo khối mã trên, “ trưng bày ” giá trị thuộc tính được đặt là “ hàng trong bảng ” có nghĩa là dữ liệu được thiết lập ở dạng các hàng trong một bảng,” màu nền ” thuộc tính được sử dụng để chỉ định màu ở cuối phần tử và cuối cùng, “ đệm ' được áp dụng:

Bước 4: Áp dụng thuộc tính “display: table-cell” trên Container “td-div”

Truy cập div thứ ba với sự trợ giúp của “ .td-div ” chọn lọc dấu chấm và id tương ứng, đồng thời áp dụng các thuộc tính CSS được cung cấp bên dưới:

• • Giá trị của “ trưng bày ” thuộc tính được đặt là “ ô bảng ” được sử dụng để tạo ô và thêm dữ liệu vào ô.
  • “ chiều rộng ” chỉ định kích thước của ô trong bảng theo chiều ngang.
  • “ ranh giới ” xác định một ranh giới xung quanh các ô.
  • “ lề ” thuộc tính phân bổ không gian bên ngoài đường viền đã xác định.
  • “ đệm ” chỉ định không gian bên trong ranh giới.

đầu ra

Tại sao nên sử dụng “display: table-cell” trong CSS?

Các ' hiển thị: ô bảng ” Thuộc tính CSS được sử dụng để đặt hiển thị thành dữ liệu làm cho phần tử hoạt động giống như một bảng. Vì vậy, người dùng có thể tạo một bản sao của bảng trong HTML mà không cần sử dụng phần tử bảng và các phần tử khác, Bao gồm td và tr. Cụ thể hơn, thuộc tính của anh ta xác định dữ liệu ở dạng bảng.

Phần kết luận

Để sử dụng “ hiển thị: ô bảng ” Thuộc tính CSS, tạo các vùng chứa div lồng nhau và chèn một lớp vào mỗi vùng chứa với một tên cụ thể. Sau đó, truy cập vùng chứa div trong CSS và áp dụng thuộc tính “display: table-cell”, trong đó “ trưng bày ” thuộc tính được sử dụng để thiết lập dữ liệu trong các ô của bảng. Bài đăng này trình bày phương pháp sử dụng thuộc tính CSS display:table-cell.