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%;}}