table esce fuori da div della pagina

[Indi22]

Ciao a tutt*! Non riesco a far rientrare una tabella "table" dentro alla larghezza della pagina. Ho un sito wordpress, uso elementor, sto facendo del mio meglio con le mie competenze e questa pagina invece l'ho creata in php. Ho gi� provato a settare vari attributi della tabella ma nessuno sembra essere utile poich�, come in immagine, esce fuori.

SenzanomeOK.jpg

Qualche persona sa indirizzarmi verso la soluzione o ha la soluzione? Grazie in ogni caso!

Ecco il codice della pagina:

<?php/** * Template Name: Risultato Questionario */
                 get_header();?>
                 <div class="questionario-container">   
                 <h1><center>Risultati del Questionario</center></h1>   
                 <?php      ...altro codice...                                 
                 echo '<td style="display: grid; border-width: 0; padding: 5px 0px px 0px; margin: 0;">';
               
                  // Inizia una nuova cella nella tabella
                 echo '<li style="display: flex;">';echo '<div class="progress-bar">';
                 echo '<div class="progress" style="width: ' . $percentuale . '%;">'
                 ;echo '<span class="service-name">' . $servizio . '</span>';
                 echo '</div>';echo '</div>';echo '<div class="buttons-container">'; 

                 // Aggiunto un nuovo container per i bottoni
                 echo '<div class="buttons" style="display:grid; max-width: min-content;">'; 
                 // Aggiunto un nuovo container per i bottoni
                 echo '<a href="https://wa.me/3487951519" class="whatsapp-button">Prenota WhatsApp</a>';
                 echo '<a href="' . $link_maggiori_info[$servizio] . '" class="info-button">Maggiori info</a>'; // Correzione del link per maggiori informazioniecho '</div>'; 

                 // Chiusura del container per i bottoni echo '</div>'; 
                 // Chiusura del container per i bottoniecho '</li>';
                 echo '</td>'; // Chiudi la cella della tabella
                 echo '</tr>'; // Chiudi la riga della tabella
                 echo '</table>'; // Chiudi la tabella}}?></div>
<?php get_footer(); ?>

ed ecco il css per la parte che serve:

/* Imposta il contenitore principale e il table per occupare il 100% della larghezza disponibile */
                 #content, .site-content, .progress-bar, table {    width: 100%;    box-sizing: border-box;
                 /* Include padding e border nella larghezza totale */}
                 /* Assicurati che il table non abbia padding o margini che influenzano la larghezza */table {                     border-width: 0;    padding: 0;    margin: 0;

                 /* Aggiungi stili specifici per dispositivi mobili */@media (max-width: 768px) {    #content,                  .site-content, .progress-bar, table {        width: 100%;        box-sizing: border-box;    }}

                 /* Barre di avanzamento */.progress-bar-container {display: flex;align-items: center;}
                 .progress-bar {background-color: #e0e0e0;border-radius: 13px;padding: 3px 10px;
                 /* Modificato per definire il padding in una sola riga */margin: 10px 0;flex: 1;position:                  relative;}

                 .progress {    display: flex;    align-items: center;    justify-content: space-between;    background-color: #76c7c0;    height: 55px;    border-radius: 10px;    position: relative;}

                 .service-name {font-size: 16px;font-weight: bold;line-height: 1.2;white-space: nowrap;}

                 .questionario-container {max-width: 800px;margin: 0 auto;padding: 22px 0px;font-family:                  Arial, sans-serif;}
                 .domanda {margin-bottom: 20px;}
                 .domanda h2 {font-size: 1.5em;margin-bottom: 10px;}
                 .domanda label {display: flex;margin-bottom: 5px;}

                 button {background-color: #4CAF50;color: rgb(0, 0, 0);padding: 10px 20px;border:                  none;cursor: pointer;}
button:hover {background-color: #45a049;}
input[type=checkbox], input[type=radio] {    box-sizing: border-box;    padding: 0;    margin-right: 5px;}

                 /* Aggiungiamo uno stile per posizionare i bottoni all'esterno della barra di avanzamento */.buttons-container {display: flex; 
                                 align-items: center; 
                                 margin-left: 10px;}
                 .buttons {display: flex;
                                line-height: 1.2;}

.whatsapp-button,.info-button {padding: 5px 10px;background-color: #4CAF50;color: #fff;text-decoration: none;border-radius: 5px;margin-left: 5px;}
.info-button {background-color: #2196F3;}

.whatsapp-button:hover,.info-button:hover {background-color: #45a049;}

@media (min-width: 769px) {.domanda img {width: 100%;}}

[KillerWorm]

Ciao, non ho una soluzione specifica ma vedo un bel po' di pasticci nel codice:

• Nell'immagine vedo che stai usando HTML5 per il quale non è supportato il tag <center>. Vedi nella documentazione cosa puoi invece usare.
• Gli elementi <td> hanno di default display: table-cell; che gli conferisce una disposizione e un comportamento ideali nel contesto del <table> di cui fanno parte. Nel momento in cui gli applichi un valore differente per la proprietà display (nel tuo caso stai applicando display: grid;) non è più garantito il "corretto" funzionamento proprio delle celle di una tabella. Se vuoi che tali elementi si comportino per ciò che sono, lascia pure il valore di default; non vedo infatti un motivo valido per cui tu debba impostarli come grid.
• Nello style del <td> hai scritto "padding: 5px 0px px 0px;" il cui valore è chiaramente non valido (vedi quel "px" che sta li in mezzo da solo). Suppongo sia un banale typo.
• I tag <li> dovrebbero normalmente stare dentro uno dei contenitori preposti alla funzione di liste (<ul>, <ol> o <menu>). Non è consentito inserire direttamente un <li> dentro un <td>. Ad ogni modo non mi è comunque chiaro quale sia il tuo intento nell'uso di un <li> (elemento di lista) in quel contesto.
• Un ulteriore consiglio nell'ambito dello sviluppo di codice web è quello di tenere sempre ben separato lo stile (CSS) dalla struttura (HTML). Vedo invece che stai usando CSS in linea applicato direttamente sui tag; questo, oltre a rendere difficile da gestire l'applicazione dello stile, nel tuo caso va a produrre in output un codice ridondante perché il marckup HTML della tabella sarà costellato di proprietà CSS ripetute identiche per ogni elemento dentro la tabella. Da quel che mi pare di capire hai già un foglio di stile separato in cui definisci la presentazione degli elementi di questa pagina; perché non definire lì anche il CSS degli elementi di tale tabella?

Prima di cercare di arrivare a delle soluzioni riguardo l'oggetto in questione, suggerisco di passare la pagina ad un validatore e correggere tutti gli eventuali errori segnalati.

[Indi22]

Ciao, non ho una soluzione specifica ma vedo un bel po' di pasticci nel codice:

• Nell'immagine vedo che stai usando HTML5 per il quale non è supportato il tag <center>. Vedi nella documentazione cosa puoi invece usare.
• Gli elementi <td> hanno di default display: table-cell; che gli conferisce una disposizione e un comportamento ideali nel contesto del <table> di cui fanno parte. Nel momento in cui gli applichi un valore differente per la proprietà display (nel tuo caso stai applicando display: grid;) non è più garantito il "corretto" funzionamento proprio delle celle di una tabella. Se vuoi che tali elementi si comportino per ciò che sono, lascia pure il valore di default; non vedo infatti un motivo valido per cui tu debba impostarli come grid.
• Nello style del <td> hai scritto "padding: 5px 0px px 0px;" il cui valore è chiaramente non valido (vedi quel "px" che sta li in mezzo da solo). Suppongo sia un banale typo.
• I tag <li> dovrebbero normalmente stare dentro uno dei contenitori preposti alla funzione di liste (<ul>, <ol> o <menu>). Non è consentito inserire direttamente un <li> dentro un <td>. Ad ogni modo non mi è comunque chiaro quale sia il tuo intento nell'uso di un <li> (elemento di lista) in quel contesto.
• Un ulteriore consiglio nell'ambito dello sviluppo di codice web è quello di tenere sempre ben separato lo stile (CSS) dalla struttura (HTML). Vedo invece che stai usando CSS in linea applicato direttamente sui tag; questo, oltre a rendere difficile da gestire l'applicazione dello stile, nel tuo caso va a produrre in output un codice ridondante perché il marckup HTML della tabella sarà costellato di proprietà CSS ripetute identiche per ogni elemento dentro la tabella. Da quel che mi pare di capire hai già un foglio di stile separato in cui definisci la presentazione degli elementi di questa pagina; perché non definire lì anche il CSS degli elementi di tale tabella?

Prima di cercare di arrivare a delle soluzioni riguardo l'oggetto in questione, suggerisco di passare la pagina ad un validatore e correggere tutti gli eventuali errori segnalati.

Ok grazie per tutti i suggerimenti, in questi giorni ci ho lavorato ed in effetti è molto meglio usare i div invece che i td etc. Sto imparando e mi pareva il metodo più semplice, mentre era invece incasinante.
Grazie anche per il validatore, non lo conoscevo e l'ho usato!

Dunque grazie per l'aiuto, ti auguro una meravigliosa giornata!🙏