Làm đẹp cho bảng bằng code css trong Theme Flatsome

Tối ưu hiển thị bảng dữ liệu với CSS tùy chỉnh trên Flatsome

Trong quá trình quản trị nội dung trên WordPress, đặc biệt với các website sử dụng theme Flatsome, bảng dữ liệu (table) mặc định thường hiển thị khá đơn điệu. Việc thiếu đường viền rõ ràng hoặc khoảng cách giữa các ô không đồng nhất không chỉ làm giảm tính thẩm mỹ mà còn gây khó khăn cho người dùng khi theo dõi thông tin.

Tại STAR WAR Digital Solutions, chúng tôi đề cao sự chỉn chu trong từng chi tiết hiển thị. Dưới đây là giải pháp CSS tối ưu giúp bảng dữ liệu của bạn trở nên chuyên nghiệp, hiện đại và đồng bộ với nhận diện thương hiệu.

Triển khai CSS tùy chỉnh

Để áp dụng các thay đổi này một cách an toàn và bền vững, bạn có thể lựa chọn một trong hai phương thức sau:

• Cách 1 (Khuyên dùng): Thêm vào file style.css của Child Theme. Đây là phương pháp tối ưu nhất để tránh mất dữ liệu khi cập nhật theme gốc.
• Cách 2: Truy cập Giao diện (Appearance) -> Tùy biến (Customize) -> Custom CSS và dán đoạn mã trực tiếp vào trình soạn thảo.

Dưới đây là đoạn mã CSS được thiết kế riêng theo tông màu chủ đạo của STAR WAR, giúp bảng dữ liệu có độ tương phản tốt và dễ đọc:

/* Tùy chỉnh bảng dữ liệu STAR WAR */
table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
}

table tr:nth-child(1) {
    background: #124750;
    color: #ffffff;
    font-weight: bold;
}

table tr:nth-child(1) td, table tr:nth-child(1) th {
    color: #ffffff;
    padding: 12px;
}

table td, table th {
    border: 1px solid #124750;
    padding: 10px;
    text-align: left;
}

Giải thích kỹ thuật

• table tr:nth-child(1): Thiết lập màu nền và màu chữ riêng biệt cho hàng tiêu đề, giúp người đọc dễ dàng định vị thông tin ngay từ cái nhìn đầu tiên.
• border-collapse: collapse: Loại bỏ khoảng cách thừa giữa các đường viền, tạo cấu trúc bảng liền mạch và gọn gàng.
• border: 1px solid #124750: Định nghĩa đường viền đồng nhất cho toàn bộ các ô, đảm bảo tính nhất quán trong thiết kế.

Kết luận

Việc trình bày dữ liệu khoa học là yếu tố then chốt để giữ chân người dùng trên website. Chỉ với vài dòng CSS cơ bản, bạn đã có thể nâng cấp trải nghiệm đọc đáng kể cho khách hàng của mình.

Nếu bạn cần tùy chỉnh chuyên sâu hơn về UX/UI hoặc tối ưu hóa hiệu suất website trên nền tảng Flatsome, đội ngũ kỹ thuật tại STAR WAR Digital Solutions luôn sẵn sàng hỗ trợ. Đừng ngần ngại liên hệ với chúng tôi để được tư vấn các giải pháp kỹ thuật thực chiến và hiệu quả nhất.