tabella HTML con intestazione e piè di pagina fissi e corpo scorrevole senza larghezza fissa

Voglio creare una tabella con fisso thead e tfoot e uno scrollable tbody!tabella HTML con intestazione e piè di pagina fissi e corpo scorrevole senza larghezza fissa

Ho provato diversi approcci, sia CSS che JavaScript + CSS, ma sono tutti deboli e inaffidabili e posso facilmente effettuare interrompendo cambiando il markup nella demo.

Quello che voglio è un modo per avere il tavolo per si comportano come un tavolo, questo significa che il browser regolare automaticamente le colonne in base al contenuto (sia a caricamento della pagina che in caso di finestra di ridimensionamento) e che in questi scenari:

se il contenuto della intestazione della colonna (thead > tr > th) è più grande del contenuto del corpo della colonna (tbody > tr > td) e più grande il contenuto del piè di pagina della colonna (tfoot > tr > td) la colonna dovrebbe ridimensionare in base alla dimensione dell'intestazione della colonna
se il contenuto del corpo della colonna (tbody > tr > td) è più grande del contenuto della intestazione della colonna (thead > tr > th) e più grande il contenuto del piè di pagina della colonna (tfoot > tr > td) la colonna dovrebbe ridimensionare in base alle dimensioni della colonna di corpo
se il contenuto del piè di pagina della colonna (tfoot > tr > td) è più grande del contenuto della intestazione della colonna (thead > tr > th) e più grande rispetto al contenuto del corpo della colonna (tbody > tr > td) la colonna deve essere ridimensionato in base alle dimensioni del colonna footer

Le table seguito dovrebbero chiarire gli scenari:

<table> 
    <thead> 
    <tr> 
     <th>Header one *leads the width* (case 1)</th> 
     <th>Header two</th> 
     <th>Header three</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Column one</td> 
     <td>Column two *leads the width* (case 2)</td> 
     <td>Column three</td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td>Footer one</td> 
     <td>Footer two</td> 
     <td>Footer three *leads the width* (case 3)</td> 
    </tr> 
    </tfoot> 
</table>

Voglio una soluzione pulita (possibile) e affidabile che funziona per i diversi scenari, forse CSS solo, ma anche JavaScript è stato OK (vaniglia e pulito JavaScript , non i plugin jQuery). Non mi interessa il vecchio supporto del browser (sarebbe bello averlo o almeno raggiungere una soluzione che può degradare con garbo sul vecchio browser ma è facoltativo) ... Posso anche accettare di usare div s invece della tabella nodi se la soluzione finale funziona come previsto ... quindi nel 2016, con browser e CSS moderni questo è possibile in qualche modo ?!

EDIT:

Il corpo dovrebbe scorrere in senso verticale e la tabella può avere un qualsiasi numero di colonne

UPDATE:

mi si avvicinò con questa soluzione: https://codepen.io/daveoncode/pen/LNomBE ma io' m ancora non soddisfatto al 100%. Il problema principale è che non posso impostare sfondi diversi per le celle di intestazione e piè di pagina.

UPDATE 2:

ora funziona!

fonte

2016-05-17 daveoncode

u possibile utilizzare DataTable ?? – Sharon

vuoi ottenere lo scorrimento verticale o orizzontale? – keziah

Scorrimento verticale – daveoncode

ho finalmente implementato una soluzione di lavoro!

il CSS è la seguente:

.wrapper { 
    width: 90%; 
    position: relative; 
    border: 1px solid #000; 
    background: #efefef; 
    overflow: hidden; 
    border-radius: 7px; 
} 

.container { 
    overflow-y: auto; 
    height: 200px; 
    border-top: 41px solid transparent; 
    border-bottom: 41px solid transparent; 
} 

table { 
    border-spacing: 0; 
    border-collapse: collapse; 
    width: 100%; 
} 

td + td { 
    border-left: 1px solid #fff; 
} 

td, th { 
    border-bottom: 1px solid #fff; 
    background: #efefef; 
    padding: 10px; 
} 

thead tr th, 
tfoot tr td { 
    height: 0; 
    line-height: 0; 
    margin: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
    color: transparent; 
    border: none; 
    white-space: nowrap; 
} 

thead tr th div, 
tfoot tr td div { 
    position: absolute; 
    color: #fff; 
    height: 20px; 
    padding: 10px; 
    margin-left: -10px; 
    line-height: normal; 
    width: 100%; 
    z-index: 2; 
    text-align: left; 
    font-weight: bold; 
} 

thead tr th div { 
    border-left: 1px solid #000; 
    border-bottom: 1px solid #000; 
} 

tfoot tr td div { 
    border-top: 1px solid #000; 
} 

tfoot tr td div.c1, 
thead tr th div.c1 { 
    background: violet; 
} 

tfoot tr td div.c2, 
thead tr th div.c2 { 
    background: green; 
} 

tfoot tr td div.c3, 
thead tr th div.c3 { 
    background: yellow; 
} 

thead tr th div { 
    top: 0; 
} 

tfoot tr td div { 
    bottom: 0; 
} 

thead tr th:first-child div, 
tfoot tr td:first-child div { 
    border-left: none; 
}

E questo è il markup:

<div class="wrapper"> 
    <div class="container"> 
    <table> 
     <thead> 
     <tr> 
      <th> 
      Header one *leads the width* (case 1) 
      <div class="c1"> 
       Header one *leads the width* (case 1) 
      </div> 
      </th> 
      <th> 
      Header two 
      <div class="c2"> 
       Header two 
      </div> 
      </th> 
      <th> 
      Header three 
      <div class="c3"> 
       Header three 
      </div> 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three [first]</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three [LATEST]</td> 
     </tr> 
     </tbody> 
     <tfoot> 
     <tr> 
      <td> 
      Footer one 
      <div class="c1"> 
       Footer one 
      </div> 
      </td> 
      <td> 
      Footer two 
      <div class="c2">Footer two</div> 
      </td> 
      <td> 
      Footer three *leads the width* (case 3) 
      <div class="c3">Footer three *leads the width* (case 3)</div> 
      </td> 
     </tr> 
     </tfoot> 
    </table> 
    </div> 
</div>

Funziona su Chrome, Firefox, Safari e IE11 (non so come si comporta su browser più vecchi). vederlo sul codepen: https://codepen.io/daveoncode/pen/LNomBE

fonte

2016-05-18 09:30:45 daveoncode

Interrompe se si riduce la finestra rispetto al contenuto della tabella. Anche se, questo può essere gestito nella maggior parte dei casi con una larghezza minima. – Dave

Supporta anche 'text-align: left' per l'intestazione. I div nell'intestazione usano il 100% della larghezza dell'intera tabella invece della th cell. – Dave

Soluzione CSS nitida e semplice, manca solo lo scorrimento orizzontale. Lo scorrimento orizzontale dell'intestazione e del piè di pagina potrebbe essere possibile utilizzando javascript. –

è possibile ottenere ciò che si desidera utilizzando un wrapper al vostro tavolo (div) e rendere il tr da thead e tfoot un position:absolute

body { 
 
    margin: 0 
 
} 
 
div { 
 
    max-height: 500px; 
 
    overflow-y: auto; 
 
} 
 
table { 
 
    width: 100% 
 
} 
 
thead tr, 
 
tfoot tr { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 15px; /* to not cover the scrollbar*/ 
 
    background: red 
 
} 
 
thead tr { 
 
    top: 0 
 
} 
 
tfoot tr { 
 
    top: 500px /* same value has max-height from div */ 
 
} 
 
th, 
 
td { 
 
    width: 33%; 
 
    font-size: 12px; 
 
    text-align: center 
 
} 
 
/*give some space between thead and tfoot*/ 
 

 
tbody tr:first-of-type td { 
 
    padding-top: 35px; 
 
} 
 
tbody tr:last-of-type td { 
 
    padding-bottom: 35px; 
 
}

<div> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Header one *leads the width* (case 1)</th> 
 
     <th>Header two</th> 
 
     <th>Header three</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
    </tbody> 
 
    <tfoot> 
 
     <tr> 
 
     <td>Footer one</td> 
 
     <td>Footer two</td> 
 
     <td>Footer three *leads the width* (case 3)</td> 
 
     </tr> 
 
    </tfoot> 
 
    </table> 
 
</div>

fonte

2016-05-17 10:32:55 dippas

Il tuo esempio non funziona, vedi qui: http://codepen.io/daveoncode/pen/VaOWgO?editors=1100#anon-login inoltre si assegna larghezza a tds (33%), ma l'approccio dovrebbe funzionare sempre (anche per tabelle con 4, 10, 50 colonne) – daveoncode

Sono in grado di scorrere solo il 'tbody' attraverso il' div' e se si avere più di 3 colonne, basta fare i conti, 100/3 = 33,3%, quindi per 4 colonne passare al 25%, 100/4 = 25% – dippas

la parte di scorrimento è semplice, il problema è l'allineamento delle colonne e nell'esempio non funziona ... inoltre, utilizzando una tabella, il browser è in genere abbastanza intelligente per regolare la dimensione della colonna in base al contenuto, questo significa che posso avere una colonna del 60% e due del 20%, non è una semplice divisione matematica;) – daveoncode

-5

$.ajax({ 
      url: "upload.php", 
      type: "POST", 
      data: fd, 
      processData: false, // tell jQuery not to process the data 
      contentType: false // tell jQuery not to set contentType 
     }).done(function(data) { 
      console.log("PHP Output:"); 
      console.log(data); 
     }); 
     return false; 
    }

fonte

2017-02-14 07:23:44 dfdf

tabella HTML con intestazione e piè di pagina fissi e corpo scorrevole senza larghezza fissa

risposta

Problemi correlati