Se vuoi provare in oggetto HTML inserisci questo:

<table class="responsive">

<thead>
<tr >
<th>HEAD 1</th>
<th>HEAD 2</th>
<th>HEAD 3</th>
</tr >
</thead>

<tbody>
<tr>
<td>Cella 1</td>
<td>Cella 1</td>
<td>Cella 1</td>
</tr>
<tr>
<td>Cella 2</td>
<td>Cella 2</td>
<td>Cella 2</td>
</tr>

<tr>
<td>Cella 3</td>
<td>Cella 3</td>
<td>Cella 3</td>
</tr>

</tbody>

</table>

Mentre nella sezione esperto dell'oggetto HTML:

.responsive {
border-collapse:collapse;
border-spacing:0;
margin:0 auto 40px;
}

@media screen and (min-width:800px){
.responsive {width: 80%;}

.responsive thead th {
height:50px;
line-height:50px;
border:1px solid #ddd;
background: navy;
color:#fff;
}

.responsive tbody td {
height:40px;
line-height:40px;
border:1px solid #ddd;
}
}

@media screen and (max-width:799px) {
.responsive, thead, tbody, th, tr, td {display: block;}

.responsive {width:90%;}
}

@media screen and (max-width:799px) {

.responsive td:before {
position: absolute;
top: 0;
left: 5px;
padding-right: 0;
white-space: nowrap;
width:100%;
}

.responsive tbody td {
border: none;
border-bottom: 1px solid #ddd;
position: relative;
text-align: left;
height:30px;
line-height:30px;
padding-left: 70%;
}

.responsive td:nth-of-type(1):before { content: "HEAD 1"; }
.responsive td:nth-of-type(2):before { content: "HEAD 2"; }
.responsive td:nth-of-type(3):before { content: "HEAD 3"; }
}

Questo esempio è formato da 3 righe e 3 celle facilmente individuabili per aumentare o diminuire righe/celle

1) ... come suggerito da Claudio, semplice, immediato e da preferire, ... ed il LINK ovviamente permetterebbe di valutare la situazione reale per eventuali peronalizzazioni;
2) ... in formato grafico, semplicissimo, compatibilmente con il ridimensionamento, (o in PDF!);
3) ... extra in formato codice HTML, tipo Patrizia;
4) ... fin quando possibile, semplicissimo, usare le normali celle (max12 oriz.) della struttura della pagina a mo di tabella;
5) ... extra >> https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100
6) ... ecc.

Io utilizzo questo sistema, che fa uso solo di CSS

<style>
/* CSS per tabella elastica */

table {
word-wrap: break-word;
width: auto !important;
}

</style>

Il suddetto codice vale per tutte le tabelle della pagina

Se nella pagina è presente più di una tabella e volessi renderne elastica solo una, attribuisco un'àncora alla tabella (es: tab01) ed inserisco il codice seguente

<style>
/* CSS per tabella elastica */

#tab01 ~ div div table {
word-wrap: break-word;
width: auto !important;
}

</style>

PS
Qualcuno sa come eliminare la barra di scroll orizzontale che, pur se non operativa, è presente in controluce?

io di solito uso questo:

<style>
body, html {overflow-x:hidden;}
</style>

...........come non detto....non funzia per la tabella...

opppppssssss......non avevo aggiornato....

Mi rispondo da me. Utilizzando il codice con l'àncora, occorre inserire quest'altra regola

#tab01 ~ div {
overflow-x :hidden !important;
}

Quindi il codice completo diventa

<style>
/* CSS per tabella elastica */

#tab01 ~ div {
overflow-x: hidden !important;
}

#tab01 ~ div div table {
word-wrap: break-word;
width: auto !important;
}

</style>

Devo fare ammenda.
È vero che qualche volta ho utilizzato il mio codice e funzionava. Ma non avevo parole lunghe, che dovevano andare a capo.

Adesso ho provato ad inserire una parola lunga in una cella della tabella e mi sono accorto che la parola non va a capo e la colonna che la contiene non viene ridimensionata

Al contrario, regolando la dimensione della tabella con lo script di Kolasim, tutto va bene: le parole lunghe vanno a capo e le relative colonne vengono ridimensionate

Conclusione: lasciate perdere il mio codice e utilizzate quello di Kolasim

... invece può tornar utile anche il tuo codice...
... per il ritorno a capo, anche se certe volte potrebbe non apparire elegante, ed a seconda dei casi, invece di:
word-wrap: break-word;
prova con: 
word-break: break-all;     ... che spezza le stringhe continue...

.

Purtroppo non è così.

Non è il word-wrap che non funziona.

Il problema è che il CSS

table {width: auto !important;}

non ottiene lo stesso risultato dello script

<script> $( document ).ready(function() { $("table").css("width", "");}); </script>

Le mie attuali conoscenze non mi permettono di scoprirne il motivo. Per il futuro non dispero.

Il tuo script sembra funzionare anche con il più canonico  "width", "auto", ma a questo punto non vorrei incorrere in un altro abbaglio e quindi lo lascerei così come è 

... lo script jQ si attiva dopo il download della pagina, quindi prevale sul codice precedente della pagina...
... adesso non ho guardato, ma credo che il tag table usi lo style in linea, quindi annullerebbe la dichiarazione style extra in /HEAD durante la lettura della pagina...
... visto che il CSS viene letto a cascata, anche se alcuni possono  storcere il naso, ma è innocuo e possibile, si potrebbe spostare il tag style extra in fondo alla pagina, prima della chiusura del body...

.

A parte che !important dovrebbe avere precedenza anche sullo style in linea, ho effettuato anche questa prova, ma il risultato è sempre lo stesso

... penso che hai ragione tu sul peso o priorità del codice...

... in questo modo dovrebbe funzionare come al solito direttamente in /HEAD:
<style>
table {
word-wrap: break-word;
width: 100% !important;
}
</style>

.... ....
... width: 100% !important;  ... invece di  width: auto !important; 

... è stato utile approfondire...

.

ciao

.

Non sono più davanti al PC, ma domani mattina proverò questa ulteriore soluzione 

Niente da fare. Ho provato a sostituire "auto" con 100%, ho provato ad inserire word-wrap: break-word anche per td e th, ma il risultato non cambia.

... forse ci sfugge qualcosa; ...se riesci a postare un esempio forse si potrebbe valutare del problema...
... non avendo riferimenti ho simulato nella stessa  tabella "Info & Conyatti" del Topic che avevo indicato prima, ove ho visto che non è stato ancora applicato il codice, ... e pare che potesse funzionare in ambedue le posizioni, /head e /body...

.

...  terrò da conto ... ...