infatti questo problema era già stato segnalato: attendiamo risposta dallo staff.

lo so Mirko, ma sarebbe utile da programma così da non perdere tempo ogni volta...

ma usando un codice css con important, come  si comporta il testo contenuto nella tabella?

sarebbe meglio che ci fosse una interruzione di riga settabile così da mandare a capo le colonne in eccesso...

se usciamo il codice di quelli del cucuzzolo per un'altra tabella, come lo modficihiamo facilmente?

<!--
=========================================================================================
Author's custom code: http://quellidelcucuzzolo.blogspot.it - Please do not remove credit
=========================================================================================
-->
<style>
/* stili tabella */
div[id^='catalogo_'] + div + div table {
border-collapse:separate !important;
border-spacing: 0 10px;
}
div[id^='catalogo_'] + div + div tr td:first-child > div {
transform: rotate(270deg);
}
div[id^='catalogo_'] + div + div tr td:nth-child(n+3):nth-child(-n+5) {
background: url('img/divider.png') right 16px no-repeat;
}
div[id^='catalogo_'] + div + div tr td:last-child a {
color: #fff !important;
text-decoration: none !important;
}

/* effetto hover */
div[id^='catalogo_'] + div + div tr td {
transition: all 0.5s ease;
}
div[id^='catalogo_'] + div + div tr:hover td:first-child,
div[id^='catalogo_'] + div + div tr:hover td:nth-child(n+3):nth-child(-n+6) {
background-color: #2d2d2d !important;
transition: all 0.5s ease;
}

div[id^='catalogo_'] + div + div tr:hover td:last-child,
div[id^='catalogo_'] + div + div tr:hover td:nth-child(2) {
background-color: #ff9408 !important;
transition: all 0.5s ease;
}

div[id^='catalogo_'] + div + div tr:hover td span {
color: #fff !important;
}

/* link esteso su una cella */
div[id^='catalogo_'] + div + div tr td:last-child {
cursor: pointer;
}

/* tabella responsive */
@media screen and (max-width:959px) {
div[id^='catalogo_'] + div + div > div {
overflow-x: auto !important;
}
div[id^='catalogo_'] + div + div table {
width: auto !important;
}
}

@media screen and (max-width:719px) {
div[id^='catalogo_'] + div + div table {
width: 100% !important;
}
div[id^='catalogo_'] + div + div tr {
display: table;
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
}
div[id^='catalogo_'] + div + div tr td {
display: table-row;
width: 100%;
}
div[id^='catalogo_'] + div + div tr td > div {
display: table-cell;
vertical-align: middle;
}
/* stili tabella */
div[id^='catalogo_'] + div + div table {
border-collapse:collapse !important;
}
div[id^='catalogo_'] + div + div tr td:nth-child(n+3):nth-child(-n+5) {
background: url('');
border-bottom: 1px solid #ccc !important;
}
div[id^='catalogo_'] + div + div tr td:first-child > div {
transform: none;
}
}
</style>

<script>
$(document).ready(function() {
// tabella responsive + stili tabella
$("div[id^='catalogo_'] + div + div tr td").wrapInner('<div></div>');
// link esteso su una cella
$("div[id^='catalogo_'] + div + div tr td:last-child a").each(function() {
var link = $(this).attr('onclick');
$(this).parents('td').attr('onclick', link);
$(this).removeAttr('onclick');
});
});
</script>

Confermo ...

io utilizzo quello postato da KolAsim qui

https://helpcenter.websitex5.com/pt/post/178276#comment5

e mi trovo benissimo...

Il codice di "quelli del cucuzzolo" , da quello che ho capito funziona per casi particolari e fa diventare la tabella orizzontale verticale , spezzandola ... e per la sua modifica @SitiWeb, dovresti chiedere a loro... , anche se non ho capito cosa ci vuoi fare ..

Invece quello di KolAsim la rende elastica, e per i miei bisogni è decisamente più pratica ed immediata...

provato ora anche io qui:

http://www.mirboprova.altervista.org/@beta_14-2/pagina-16.html

e direi che funzia ancora.....ciaoooo

ok grazie moderatori, ho provato anche io. Questo è il codice da mettere Prima della Chiusura del tag Head:

<style> table {word-break: break-all;}
#imTableObject_36_02 {overflow-x: hidden !important;}</style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>

da modificare l'id della tabella (nel mio caso 36_02)

Però in responsive vengono tranciate le parole...

http://sitiwebapp.16mb.com/dance/pagina-16.php

Ecco il codice giusto:

<style> table {word-wrap: break-all;}
#imTableObject_36_02 {overflow-x: hidden !important;}</style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>

Prego, Kris: grazie all'input dei moderatori, poi ho unito e perfezionato il codice.