Problema incolonnamento tabella

[yosef70]

Salve,
sto provando a creare un elenco con intestazione fissa e scroll verticale, in parte riuscito se non per l'incolonnamento tra l'intestazione ed i dati di dettaglio.
Questo il codice che sto utilizzando:

<?php
 session_start();

 if (!isset($_SESSION['amministrazione']) <> "" )
     header('location:index');
  
     include "db_connaps.php";

    $testo = $_POST['testo'];

    if ($chksctrib = "1")
        $sqlquery = "SELECT id, CODICE, RAG_SOC, CODICE_FISCALE, P_IVA, DOM_INDIRIZZO, DOM_DESCR_COM, DATA_NAS FROM anagrafica
                    WHERE RAG_SOC LIKE '".$testo."%'";

        $rs = mysqli_query($mysqli, $sqlquery);
        $nr = mysqli_num_rows($rs);

        // Popolamento tabella
        /*echo "<div class='table-responsive overflow-auto' style='height: 300px'>";*/
        echo "<table class='table'>";
        echo "<thead>
                <tr style='background-color: rgba(0, 0, 0,.03);'>
                    <th scope='col' style='color:#2271BA; padding:5px;' class='font-weight-normal'>Rcontrib</th>
                    <th scope='col' style='color:#2271BA; padding:5px;' class='font-weight-normal'>Codice</th>
                    <th scope='col' style='color:#2271BA; padding:5px;' class='font-weight-normal'>Ragione sociale</th>
                    <th scope='col' style='color:#2271BA; padding:5px;' class='font-weight-normal'>Codice fiscale</th>
                    <th scope='col' style='color:#2271BA; padding:5px;' class='font-weight-normal'>Partita IVA</th>
                    <th scope='col' style='color:#2271BA; padding:5px;' class='font-weight-normal'>Indirizzo</th>
                    <th scope='col' style='color:#2271BA; padding:5px;' class='font-weight-normal'>Comune</th>
                    <th scope='col' style='color:#2271BA; padding:5px;' class='font-weight-normal'>Data nascta</th>
                </tr>
        </thead>";
        /*<tfoot style='background-color: rgba(0, 0, 0,.03);'>
        <tr>
            <td colspan='12' style='color:#2271BA; class='font-weight-normal'>'PROVA'.&nbsp;</td>
        </tr>
        </tfoot>*/
        echo "<tbody>
        <td colspan='12'>
        <div class='overflow-auto' style='height: 300px'>
        <table class='table'>";

            if ($nr != 0){
                for($x = 0; $x < $nr; $x++){
                    $row = mysqli_fetch_assoc($rs);
                    /*Tabella elenco anagrafica*/
                    echo "<tr>";
                    echo "<td style='padding: 5px; font-size: 12px'>" . $row['id'] . "</td>";
                    echo "<td style='padding: 5px; font-size: 12px'>" . $row['CODICE'] . "</td>";
                    echo "<td style='padding: 5px; font-size: 12px'>" . $row['RAG_SOC'] . "</td>";
                    echo "<td style='padding: 5px; font-size: 12px'>" . $row['CODICE_FISCALE'] . "</td>";
                    echo "<td style='padding: 5px; font-size: 12px'>" . $row['P_IVA'] . "</td>";
                    echo "<td style='padding: 5px; font-size: 12px'>" . $row['DOM_INDIRIZZO'] . "</td>";
                    echo "<td style='padding: 5px; font-size: 12px'>" . $row['DOM_DESCR_COM'] . "</td>";
                    echo "<td style='padding: 5px; font-size: 12px'>" . $row['DATA_NAS'] . "</td>";
                    echo "</tr>";
                }
            }else{
                echo "Nessun record trovato!";
            }
            // Chiudo la connessione ad DB
            mysqli_close($mysqli);
            echo "</table>";
            echo "</div>";
            echo "</td>";
            echo "</tr>";
            echo "</tbody>";
        echo "</table>";
    
?>

Allego schermata per far vedere il risultato,
E' possibile anche eliminare la riga vuota stretta al di sotto dell'intestazione?
Grazie
Giuseppe

 

[illiterate2020]

Ciao Giuseppe per incolonnarli dovresti dare dentro lo style uno stesso width per le colonne di intestazione e le colonne dei dati ,per eliminare la riga vuota elimina credo <td colspan='12'> che non vedo cosa ci faccia li...prova ciao

 

[yosef70]

Ciao Giuseppe per incolonnarli dovresti dare dentro lo style uno stesso width per le colonne di intestazione e le colonne dei dati ,per eliminare la riga vuota elimina credo <td colspan='12'> che non vedo cosa ci faccia li...prova ciao

Grazie, provato ma poi ho problemi, non è più responsive, credo di cambiare ed utilizzare la paginazione, nel frattempo proverò ancora, e/o se qualcuno ha qualche soluzione. Il td colspan lo devo mettere altrimenti i dati cominciano un bel pò in basso, non subito sotto l'intestazione.
Ciao

 

[illiterate2020]

Ciao per preservare il responsive le dimensioni del width devono essere percentuali cioe tipo cosi width="35%"

 

[yosef70]

Ciao per preservare il responsive le dimensioni del width devono essere percentuali cioe tipo cosi width="35%"

Si scusa, ci stavo lavorando, in qualche modo ci sto riuscendo, poi ti dico come è andata, grazie

 

[macus_adi]

Ciao per preservare il responsive le dimensioni del width devono essere percentuali cioe tipo cosi width="35%"

?
Basterebbe utilizzare i breakpoint con i psudo-css senza assegnare dimensioni percentuali...
Anche perchè, per utilizzare correttamente su mobile una tabella si "dovrebbe" virtualizzare un "DataIterator" e non un "DataTable"....


Es pseudo-css

td:nth-child(x){
    width:calc(100% - 36px );
}

X: indica l'i-esimo elemento

In questo modo puoi calcolare in modo esatto la dimensione massima della colonna, sfruttando il 100% del width!!

 

[yosef70]

?
Basterebbe utilizzare i breakpoint con i psudo-css senza assegnare dimensioni percentuali...
Anche perchè, per utilizzare correttamente su mobile una tabella si "dovrebbe" virtualizzare un "DataIterator" e non un "DataTable"....


Es pseudo-css

td:nth-child(x){
    width:calc(100% - 36px );
}

X: indica l'i-esimo elemento

In questo modo puoi calcolare in modo esatto la dimensione massima della colonna, sfruttando il 100% del width!!

Non sono pratico di pseudo-css come potrei applicarlo al codice che ho postato? cmq credo di convertire e utilizzare la paginazione.
Grazie

 

[yosef70]

Si scusa, ci stavo lavorando, in qualche modo ci sto riuscendo, poi ti dico come è andata, grazie

Più o meno ci sono riuscito, anche se non è perfetto quando si ridimensiona la finestra.
Provo con paginazione, vediamo se meglio.
Grazie