Tabella: intestazione fissa, corpo scorrevole, soluzione più robusta/semplice?

Eventuali duplicati:
HTML table with fixed headers?Tabella: intestazione fissa, corpo scorrevole, soluzione più robusta/semplice?

ricerca di una soluzione per creare una tabella con un corpo scorrevole, ed un collettore statico/fisso.

ricerca in giro sembra produrre MOLTI pezzi traballante di codice, o non funziona in IE, che richiede una quantità enorme di Javascript e di tweaking, o un importo sciocco di hack CSS ecc

Per essere onesti, se è un caso di hack CSS o Javascript, penso che preferirei usare l'opzione Javascript.

L'alternativa credo che è quello di mettere tutto in un div, e basta scorrere l'intera tabella - ma questo è un po 'pacchiani: D

fonte

2009-08-19 Nick

Dup: http://stackoverflow.com/questions/673153/html-table-with-fixed-headers –

<table style="width: 300px" cellpadding="0" cellspacing="0"> 
<tr> 
    <td>Column 1</td> 
    <td>Column 2</td> 
</tr> 
</table> 

<div style="overflow: auto;height: 100px; width: 320px;"> 
    <table style="width: 300px;" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    </table> 
</div>

Ciò crea un'intestazione di colonna fissa con la tabella scorrevole sotto di essa. Il trucco è incorporare la tabella che vuoi scorrere in un tag con l'attributo overflow impostato su auto. Ciò costringerà il browser a visualizzare una barra di scorrimento quando il contenuto della tabella interna è maggiore dell'altezza dell'area circostante.

La larghezza del lato esterno deve essere maggiore della larghezza se il tavolo interno ospita la barra di scorrimento. Questo potrebbe essere difficile da ottenere esattamente nel modo giusto, perché alcuni utenti potrebbero aver impostato le barre di scorrimento in modo che fossero più larghi o più piccoli del valore predefinito. Tuttavia, con una differenza di circa 20 o 30 pixel, di solito sarai in grado di visualizzare la barra di scorrimento senza problemi.

CSS-Tricks parla anche dell'utilizzo di JavaScript e CSS per aiutare in questo modo, quindi è possibile utilizzare l'evidenziazione. Ecco il link a quello article.

fonte

2009-08-19 16:26:10 Dennis

Mentre funziona, non è eccezionale dal punto di vista dell'accessibilità. Non ci sono intestazioni di tabella () e anche se esistessero, non sarebbero esplicitamente associati alle colonne pertinenti poiché la tabella è suddivisa in due tabelle. –

Questo è davvero azzeccato, se definisco manualmente la larghezza di ogni colonna - come diceva pmc, forse non ideale dall'accessibilità ma tutte le soluzioni che ho visto, questo è * di * il mio preferito, grazie così tanto! – Nick

Se il tuo tavolo è pieno zeppo, questo non sembra uscito bene. – quillbreaker

Credo che la soluzione è quella di impostare un'altezza esplicita per il tbody e imposta l'overflow su automatico o scorri. Sfortunatamente, come hai scoperto, le tabelle e i CSS sono una combinazione difficile, e ad IE piace soffocare.

fonte

2009-08-19 16:21:51

Se è possibile correggere le larghezze delle colonne, è molto più semplice. Se vuoi che il browser calcoli le larghezze, diventa molto più difficile. Fondamentalmente, avere la tabella in div che scorre (altezza, overflow: auto) e avere quel div all'interno di una posizione: div par. Nel div esterno, hai un'altra posizione div: absolute, overflow: hidden, height: qualunque sia l'altezza dell'intestazione, imposta innerHTML di questo div all'HTML interno del div interno; Ecco una pagina che dimostra. Ci sono un sacco di grattacapi, ma è fattibile ...

<html> 
<head></head> 
<body onload="doit();"> 
<div id="outer" style="position:relative;"> 
    <div id="inner" style="height:100px; overflow:auto;"> 
    <script> 
     var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>'; 
     var width = Math.floor(Math.random() * 100); 
     var d = ''; 
     for(var i = 0; i < width; i++){d += 'a';} 
     for(var i = 0; i < 100; i++){ 
      html += '<tr><td>' + d + '</td><td>some more data</td>'; 
     } 
     html += '</table>'; 
     document.write(html); 
    </script> 
    </div> 
    <div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div> 
</div> 

<script> 
function doit(){ 
    var inner = document.getElementById('inner'); 
    var secondWrapper = document.getElementById('secondWrapper'); 
    secondWrapper.innerHTML = inner.innerHTML; 
} 
</script> 
</body> 
</html>

Nota come si aggiorna e cambia la dimensione dei dati, l'intestazione corrisponde perfettamente. Questo è il vero trucco.

fonte

2009-08-20 06:25:38

Non capisco come funzioni, quindi deve essere una magia nera. Più seriamente, ho dovuto giocherellare con l'altezza dei miei tag TH e l'altezza del secondo wrapper per farlo funzionare. Inoltre sembra funzionare un po 'meglio se il tavolo ha una larghezza massima del 98% o giù di lì, per evitare che il tavolo e la barra di scorrimento si incontrino a vicenda. Come sei arrivato/dove l'hai preso, comunque? È davvero intelligente. – quillbreaker

Nota per gli altri: se si dispone di una tabella con elementi modificabili, questo metodo copia la tabella e quindi copia gli elementi. Sei stato avvertito. – quillbreaker

Ci sono un sacco * intero * di trucchi. Dopo aver lavorato con questo, penso che non sia abbastanza stabile da poter essere utilizzato in qualsiasi codice di produzione. È troppo tardi per cambiare il mio voto su questa risposta, però, il che è un peccato. – quillbreaker

C'era anche un quiz per questo tipo di cose su Sitepoint, per coloro che cercano una soluzione non JS. Tuttavia ho trovato che il footer della tabella era necessario per fermare le intestazioni della tabella dal collassare la loro larghezza SE il contenuto delle celle non era abbastanza largo. Ho finito per nascondere il piede nell'applicazione che ho usato su questo.
È puro HTML/CSS e funziona in IE6 oltre ai browser moderni. Tuttavia ci sono alcune limitazioni di stile per l'intestazione.

fonte

2009-08-20 13:08:02

Ho appena creato un plugin jQuery che fa esattamente quello che vuoi. È di dimensioni molto ridotte e veramente facile da implementare.

Tutto ciò che è richiesto è un tavolo che ha un thead e tbody.

È possibile avvolgere quella tabella in un DIV con un nome di classe e la tabella verrà sempre ridimensionata per adattarsi a tale div. quindi, ad esempio, se la tua div è in scala con la finestra del browser, anche la tabella. L'intestazione verrà corretta durante lo scorrimento. Il piè di pagina verrà corretto (se abiliti un piè di pagina). Hai anche la possibilità di clonare l'intestazione nel footer e farlo riparare. Inoltre, se si rende la finestra del browser troppo piccola e tutte le colonne non possono andare bene ... scorrerà anche orizzontalmente (anche l'intestazione).

Questo plug-in consente al browser di dimensionare le colonne in modo che non siano colonne a larghezza fissa.

basta passare il nome di classe del DIV al plugin in questo modo: $ ('. MyDiv'). FixedHeaderTable ({footer: true, footerId: 'myFooterId'}); e il plugin farà il resto. FooterID è un elemento sulla pagina che contiene il mark-up per il footer. questo è usato se vuoi avere l'impaginazione come piè di pagina.

Se nella pagina sono presenti più tabelle, funzionerà anche per ogni tabella che si desidera avere un'intestazione fissa.

controllare qui: http://fixedheadertable.mmalek.com/

Tenere a mente la sua ancora 'beta', quindi sono l'aggiunta di nuove funzionalità e correzioni di bug al giorno.

Browser supportati: IE6, IE7, IE8, Firefox, Safari e Chrome

Ecco un link per la mia risposta ad un'altra persona che ha avuto la stessa domanda: Frozen table header inside scrollable div

fonte

2009-10-07 19:22:39 Mark

ne dite di questo:

<table style="width: 400px;"> 
<thead><tr> <th> head </th> </tr> 
</thead> 
<tbody style="height: 100px; overflow-y: auto; overflow-x: hidden;"> 
<tr> <th> .. </th> </tr> 
</tbody> 
</table>

fonte

2011-05-26 18:34:53 goth

Una buona idea, ma non funziona: http://jsfiddle.net/f22uoxqb/ – simmer

Tabella: intestazione fissa, corpo scorrevole, soluzione più robusta/semplice?

risposta

Problemi correlati