[CSS] titolo fisso di una tabella

marino51 · 25 Nov 2016

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 · 25 Nov 2016

Per gestire le tabelle scorrevoli una buona soluzione è JS! Ti potrebbe andare bene?

marino51 · 25 Nov 2016

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 · 25 Nov 2016

Con css:
http://www.extrowebsite.com/articol...crollabile-verticalmente-formattata-con-i-css
In fondo a questa ci sono i link per realizarle con jquerry
http://www.sergiomallucci.it/creare...-scrollabile-solo-con-css-e-senza-javascript/
http://www.ricmanx.com/blog/2008/09/scroll-alle-tabelle-lunghe-con-header-footer/
Con javascript:
http://www.donatantonio.net/blog/tag/tabella-con-scroll/

Se non ti basta ti do poi un esempio mio con jquerry

marino51 · 26 Nov 2016

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

dopo js

Cerca

Cerca

[CSS] titolo fisso di una tabella

marino51

Utente Attivo

Max 1

Super Moderatore

marino51

Utente Attivo

Max 1

Super Moderatore

marino51

Utente Attivo

Discussioni simili