Przesuwane tabelki na małych ekranach

artek

Avatar: artek

2021-12-20 15:01

Często w treści strony klienci dodają rozbudowane tabele np. cenniki, zestawienia itp. które rozpychają stronę na małych ekranach. Poniżej sposób na takie tabele w wersji responsywnej, można je przesuwać aby zobaczyć zawartość która się schowała na wąskim ekranie:

W pliku templates/default/footer.php przed znacznikiem </body> dodajemy:

 <script>$('table').wrap("<div class='rwd-table'></div>");</script> 



W pliku templates/default/style.css dodajemy:
@media screen and (max-width:960px) { .rwd-table{overflow-x:scroll;} }
table{border-collapse:collapse;}
@media screen and (min-width:960px) { table{width:100%;table-layout:fixed;} }

» Quick.Cms v6.x

Artur | projektgraficzny.com

Do góry
o nas | kontakt