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!
Bài viết mới:
- Truy xuất thông tin giỏ hàng từ đối tượng $cart trong woocommerce
- Ẩn nút Proceed To Checkout trong qua trình thanh toán Woocommerce
- Tạo pupup/Form liên hệ báo giá bằng lightbox trong theme flatsome
- Hướng dẫn kiểm tra độ chai pin laptop bằng công cụ chính chủ Windows
- Kỹ thuật dồn các icon vào 1 file để hiển thị khi làm web
