Code js xử lý table trên mobile

Thông thường table nó không hiển thị tốt trên mobile đối với các web chạy giao diện resposive.

Hôm nay mình chia sẻ đoạn code js ngắn để chống lại việc nó tràn viền trên mobile. Thay vào đó nó sẽ trược ngang trên màn hình mobile

Cách làm: thêm code js vào footer của theme, thêm trực tiếp vào theme hoặc dùng plugin Insert header and footer hoặc các theme có hỗ trợ tính năng chèn code js vào footer.

Code:

<script>
jQuery(document).ready(function($) {
    $("table").not(".variations").wrap('<div class="mhs-table"></div>');
    $(".mhs-table").css("overflow-x","auto");
})
</script>

Nếu hệ thống báo lỗi không nhận được biến jQuery, các bạn hãy thêm thư viện này vào footer, ngay dưới đoạn script trên

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Tham khảo thêm các phiên bản (có thể có bản mới hơn) tại: https://developers.google.com/speed/libraries/

Chúc các bạn thành công!