Bảng Table Wordpress Flatsome Không Tương Thích Di Động

Trong một số trường hợp, có thể những thông số kỹ thuật của sản phẩm được bố trí dạng bảng không tương thích với thiết bị di động. Trên di động bị tràn hoặc không đẹp mắt. Vì vậy, cần phải tạo thanh trượt ngang cho bảng.

Bạn hãy thực hiện theo cách sau:

Đăng nhập quản trị

Tại mục Flatsome > Advanced > Global Settings

Thêm đoạn JavaScript vào mục Footer Scripts

<script>
document.addEventListener(“DOMContentLoaded”, function() {
var tables = document.querySelectorAll(‘table’);

if (tables.length > 0) {
var div = document.createElement(‘div’);
div.className = ‘table-responsive’;
tables.forEach(function(table) {
var wrapperDiv = div.cloneNode();
table.parentNode.insertBefore(wrapperDiv, table);
wrapperDiv.appendChild(table);
});
tables[0].classList.add(‘table’);
}
});
</script>

Tại mục Custom CSS, thêm đoạn CSS sau:

.table-responsive{overflow-x: scroll;}
@media (min-width: 768px) {
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}