Quá trình mình thiết kế website và sử dụng chưa bao giờ thấy cái table nào xí còn không hỗ trợ mobile như cái table của Flatsome. Chắc là nhà phát hành theme muốn tạo công ăn việc làm cho anh em dev. Sau đây là Css cho bảng thay thế cho table mặc định rất xí và không responsive của theme Flatsome 🙂
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/** codfe.com - table css **/ table { width: 100%!important; border-collapse: collapse; } tr:first-child { background: #049cdb!important; color:white } tr:nth-of-type(odd) { background: #eee; } td { padding: 6px; border: 1px solid #ccc; text-align: left; padding-left:10px; padding-left:15px !important; } th { padding: 6px; border: 1px solid #ccc; text-align: left; padding-left:15px !important; background: #1E73BE; } |
Shortcode Table responsive cho mobile và các thiết (cho vào function.php)
1 2 3 4 5 6 |
/** Codfe responsive cho table [codfe-table]noi dung[/codfe-table]**/ add_shortcode('codfe-table','codfe_table'); function codfe_table($args, $content){ return '<div class="table-responsive">'.$content.'<div>'; } |
khi dùng thì thêm shortcode như sau
1 |
[codfe-table]noi dung[/codfe-table] |
Nếu chỉ muốn chỉnh CSS cho table riêng bài viết (post) hay trong trang sản phẩm thì thêm class .blog-single hoặc.woocommerce-tabs như bên dưới
Cho single post trong wordpress
1 2 3 4 5 6 7 |
/** codfe.com - table css cho post **/ .blog-single table { width: 100%; border-collapse: collapse; } .... |
Cho trang sản phẩm – product woocommerce
1 2 3 4 5 6 7 8 9 |
/** codfe.com - table css cho product **/ .woocommerce-tabs table { width: 100%; border-collapse: collapse; } .... |
Chúc các bạn thành công!
- [Code] show gallery sản phẩm ra trang danh mục của woocommerce
- Cách để xóa thư mục Uncategorized trong wocommerce
- Tạo menu phía dưới cho mobile flatsome – Sticky mobile footer menu Flatsome
- Hướng dẫn bật tính năng chống bị Ransomware tống tiền của Windows 10
- Câu lệnh kiểm tra Nameserver của Domain đang sử dụng