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!
