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

Mặc định khi tạo bảng ( Table) trong wordpress thường không đẹp do theme không hỗ trợ nên nhìn khá đơn điệu, không có viền nhìn không chuyên nghiêp cho lắm.
Bài viết này Themewp.vn sẽ hướng dẫn cách làm đẹp cho bảng bằng code css. Demo ở đây đang sử dụng với Theme Flatsome.

Bảng khi chưa css
Bảng khi chưa css

Bạn chỉ cần copy đoạn code CSS Table dưới đây thêm vào theme đang sử dụng rồi lưu lại là được, cụ thể bạn vào vào file style.css trong theme ( Nên thêm vào child theme để khi cập nhật theme sẽ không mất code ) hoặc thêm ở phần Giao diện -> tùy biến -> custom css.

table tr:nth-child(1) 
{
    background: #124750;
    color: #fff;
}
table tr:nth-child(1) td 
{
    color: #fff;
}
table 
{
    border-collapse: collapse;
    border: 1px solid #ccc;
    border-spacing: 0;
}
table td 
{
    border: 1px solid #124750;
}

Thành quả sau khi hoàn thành sẽ được như hình phía dưới hoặc bạn có thể xem demo thực tế tại đây: https://themewp.vn/tuy-chinh-theme/

Bảng sau khi css
Bảng sau khi css

Rất đơn giản phải không nào, chúc các bạn thành công !

 

5/5 - (6 bình chọn)
facebook-icon
zalo-icon
zalo-icon