[CSS] titolo fisso di una tabella

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
sto modificando delle pagine che contengono tabelle,

tutte le tabelle sono ben visibili in larghezza ovvero non hanno bisogno dello scroll,
mentre deve essere gestito lo scroll per la posizione verticale, essendo le tabelle formate da più righe, non tutte visualizzabili nella pagina

oggi lo scroll delle tabelle lavora "bene", con l'eccezione che i titoli delle colonne sono una riga qualunque e seguono quindi lo scroll

ho modificato il css disaccoppiando il titolo dalle righe ed in questo modo riesco a fissare la riga del titolo, rendendola indipendente dallo scroll
ho portato la barra dello scroll all'esterno della tabella, ma ....

avendo disaccoppiato titolo e corpo della tabella sono costretto a dare una larghezza minima alle colonne, min-width: 120px;
ciò mi disturba perchè,
di fatto le colonne sono gestite a larghezza fissa e non a "contenuto"
volendo gestire tabella diverse con lo stesso css, perdo flessibilità, perchè una tabella può avere 12 colonne un'altra solo 5 e la larghezza minima può portare la tabella oltre lo schermo

vorrei trovare una soluzione per legare l'ampiezza di titolo e corpo eliminando la larghezza minima

per la mia scarsissima conoscenza, chedo il vostro supporto, grazie

ps, il plug-in "tablesorter" gestisce l'ordinamento della tabella cliccando il titolo
HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style>

/* -------------------------------------------------------- allineamento */

.SpwTableDiv
    {
    overflow-x: hidden;
    }

.SpwTableDiv table
    {
    overflow-y: scroll;
    }

.SpwTableDiv thead
    {
    display: table-row;
    }

.SpwTableDiv tbody
    {
    overflow-x: hidden;
    padding-right: 15px;  /* scroll bar esterna */
    display: block;
    height: 400px;
    }

th, td
    {
    min-width: 120px;  /* elemento da eliminare */
    }

/* -------------------------------------------------------- cosmesi */

table, th, td
    {
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    }

table
    {
    border: 4;
    color: black;
    empty-cells: show;
    }

th
    {
    font-size: 0.8rem;
    font-weight: bold;
    }

td
    {
    font-size: 0.8rem;
    font-weight: normal;
    }

    </style>

    <title>SolarPower - Online statistics</title>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#SpwTable").tablesorter();
    });
    </script>
  </head>
  <body>
    <div>
      <center>
        <div class="title2">Intraday Log list for my solar plant</div>
        <div class='title2'>24 November 2016</div>
        <a href="graph.php">[back to graph selection]</a>
        <br /> <br />

        <div class='SpwTableDiv'>

          <table id="SpwTable" class="tablesorter" cellpadding=4>
            <thead>
              <tr>
                <th id='th1'>EVENT</th>
                <th id='th2'>event code</th>
                <th id='th3'>event description</th>
                <th id='th4'>working time</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td>07:51:29</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:00</td>
              </tr><tr>
                <td>07:52:26</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:57</td>
              </tr><tr>
                <td>07:53:21</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:55</td>
              </tr><tr>
                <td>07:54:17</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:56</td>
              </tr><tr>
                <td>07:55:13</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:56</td>
              </tr><tr>
                <td>07:56:07</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:54</td>
              </tr><tr>
                <td>07:57:09</td><td>-001</td><td>System Started.</td><td style='color: black'>00:01:02</td>
              </tr><tr>
                <td>07:58:05</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:56</td>
              </tr><tr>
                <td>07:58:58</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:53</td>
              </tr><tr>
                <td>07:59:52</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:54</td>
              </tr><tr>
                <td>08:00:47</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:55</td>
              </tr><tr>
                <td>08:01:41</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:54</td>
              </tr><tr>
                <td>08:05:53</td><td>-001</td><td>System Started.</td><td style='color: red'>00:04:12</td>
              </tr><tr>
                <td>08:06:48</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:55</td>
              </tr><tr>
                <td>08:07:47</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:59</td>
              </tr><tr>
                <td>08:08:42</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:55</td>
              </tr><tr>
                <td>08:09:37</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:55</td>
              </tr>
            </tbody>
          </table>

        </div>

      </center>
    </div>
  </body>
</html>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Per gestire le tabelle scorrevoli una buona soluzione è JS! Ti potrebbe andare bene?
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
ho provato anche,
HTML:
<th id='th1'>EVENT</th>
<th id='th2'>event code</th>
<th id='th3'>event description</th>
<th id='th4'>working time</th>

<td headers='th1'>07:51:29</td><td headers='th2'>-001</td><td headers='th3'>System Started.</td><td headers='th4' style='color: black'>00:00:00</td>
ma senza successo, in ogni caso il funzionamento è in una sola direzione


js é l'unica soluzione ?

nel mio esempio, mi sembra che con js,
si possa identificare la massima larghezza tra header e prima riga, colonna per colonna,
poi applicare la larghezza trovata alla rispettiva colonna, ma non sono sicuro del funzionamento

hai un esempio js (semplice) a portata di copia/incolla ?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
i primi due link riportano esempi con colonne di larghezza predefinita togliendo il valore, ricadono nel mio stesso problema
ho provato anche un paio di plug-in con risultato analogo, l'intestazione della tabella è "sconnessa" rispetto al corpo

ho deciso di provare un "paio di righe" di codice js e sembra funzionare, rimango su questa strada
di seguito allego la "bozza" di prova, da completare, se a qualcuno interessasse
HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style>

/* -------------------------------------------------------- allineamento */

.SpwTableDiv
    {
    overflow-x: hidden;
    }

.SpwTableDiv table
    {
    overflow-y: scroll;
    }

.SpwTableDiv thead
    {
    display: table-row;
    }

.SpwTableDiv tbody
    {
    overflow-x: hidden;
    padding-right: 15px;  /* scroll bar esterna */
    display: block;
    height: 400px;
    }

th, td
    {
/*  min-width: 120px;  */
    }

/* -------------------------------------------------------- cosmesi */

table, th, td
    {
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    }

table
    {
    border: 4;
    color: black;
    empty-cells: show;
    }

th
    {
    font-size: 0.8rem;
    font-weight: bold;
    }

td
    {
    font-size: 0.8rem;
    font-weight: normal;
    }

    </style>

    <title>SolarPower - Online statistics</title>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        var    thWid=[], i=0;

        $('table th').each(function()
        {
            mWid = $(this).width();
            thWid.push(mWid);
        });

        $('table td').each(function()
        {
            if (i < thWid.length) $(this).css("min-width",thWid[i]+"px");
            i++;
        });

        $("#SpwTable").tablesorter();
    });
    </script>
  </head>
  <body>
    <div>
      <center>
        <div class="title2">Intraday Log list for my solar plant</div>
        <div class='title2'>24 November 2016</div>
        <a href="graph.php">[back to graph selection]</a>
        <br /> <br />

        <div class='SpwTableDiv'>

          <table id="SpwTable" class="tablesorter" cellpadding=4>
            <thead>
              <tr>
                <th>EVENT</th>
                <th>event code</th>
                <th>event description</th>
                <th>working time</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td>07:51:29</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:00</td>
              </tr><tr>
                <td>07:52:26</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:57</td>
              </tr><tr>
                <td>07:53:21</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:55</td>
              </tr><tr>
                <td>07:54:17</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:56</td>
              </tr><tr>
                <td>07:55:13</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:56</td>
              </tr><tr>
                <td>07:56:07</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:54</td>
              </tr><tr>
                <td>07:57:09</td><td>-001</td><td>System Started.</td><td style='color: black'>00:01:02</td>
              </tr><tr>
                <td>07:58:05</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:56</td>
              </tr><tr>
                <td>07:58:58</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:53</td>
              </tr><tr>
                <td>07:59:52</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:54</td>
              </tr><tr>
                <td>08:00:47</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:55</td>
              </tr><tr>
                <td>08:01:41</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:54</td>
              </tr><tr>
                <td>08:05:53</td><td>-001</td><td>System Started.</td><td style='color: red'>00:04:12</td>
              </tr><tr>
                <td>08:06:48</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:55</td>
              </tr><tr>
                <td>08:07:47</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:59</td>
              </tr><tr>
                <td>08:08:42</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:55</td>
              </tr><tr>
                <td>08:09:37</td><td>-001</td><td>System Started.</td><td style='color: black'>00:00:55</td>
              </tr>
            </tbody>
          </table>

        </div>

      </center>
    </div>
  </body>
</html>
ps, ho una sola tabella per pagina per cui non ho specificato i nomi

prima di js
Cattura1.PNG

dopo js
Cattura2.PNG
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
G Input checkbox in CSS HTML e CSS 0
G classe CSS sovrascritta HTML e CSS 2
G file CSS contenente variabili HTML e CSS 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
L problema collegamento file css con html HTML e CSS 1
M CSS "puro" HTML e CSS 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
Z Google Fonts CSS tra desktop e responsive HTML e CSS 1
Z Slide show CSS HTML e CSS 1
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
N [css] :active HTML e CSS 1
Shyson [WordPress] [CSS] Formattare casella WordPress 0
A icone css in selectmenu jQuery 2
M Problematica CSS (tag html,body) HTML e CSS 4
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2
I [HTML/CSS] Consigli sul mio primo sito HTML e CSS 9
V Galleria con CSS e Javascript Javascript 2
C CSS pagina a schermo intero HTML e CSS 3
V Menù CSS da file in cartella esterna HTML e CSS 4

Discussioni simili