Usando i suggerimenti di this fiddle stata creata una tabella di scorrimento con intestazioni fisse:DIV galleggiante sopra un TH per una tabella scorrimento con intestazioni fisse, ma non posso centrare l'intestazione
<!DOCTYPE html>
<html lang='en' dir='ltr'>
<head>
<meta charset='UTF-8' />
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style>
body {
font-family: sans-serif;
font-size: 20px;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 2em;
background: #808;
}
#container {
overflow-y: auto;
height: 200px;
padding-top: 1em;
}
table {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
th {
height: 10px;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
background: #0f0;
border: 2px solid #f0f;
white-space: nowrap;
}
th > div {
position: absolute;
background: #ff0;
color: #00f;
padding: 1em;
top: 0;
margin-left: auto;
line-height: normal;
border: 3px solid #805;
opacity: 0.5;
}
td {
border-bottom: 3px solid #666;
background: #fdd;
color: #c0c;
padding: 1em;
}
td:first-child {
border-right: 1px solid #aaa;
font-family: serif;
text-align: center;
}
td:last-child {
border-left: 1px solid #aaa;
}
</style>
<title>test</title>
</head>
<body>
<div>
<section>
<div id='container'>
<table>
<thead>
<tr class='header'>
<th>
head 100
<div id='h1'>head 1</div>
</th>
<th>
head 2
<div id='h2'>head 2</div>
</th>
<th>
head last
<div id='hL'>head last</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aardvark</td>
<td>beta<br />longer text<br />spanning on some lines</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta<br />long text</td>
<td>omega and something else</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega just to finish</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</body>
</html>
Lo scorrimento funziona bene, come puoi testare su https://jsfiddle.net/Marco_Bernardini/h8ukwf3w/4/ ma ha un problema estetico: l'intestazione delle colonne non è centrata.
L'altezza TH verrà impostata su 0 e i suoi bordi verranno rimossi: ora ha un colore brutto solo per vederlo durante la fase di debug.
Ho testato molte soluzioni, e alcuni di loro sono commentate via nel violino:
- con
width: -moz-available;ogni intestazione inizia nella posizione corretta, ma tutti finiscono sul lato destro del tavolo; Ho aggiunto ilopacity: 0.5;quindi questo comportamento può essere visto chiaramente - con
width: 100%;laDIVprende la larghezza della intera tabella, non di genitoreTH - con
width: inherit;non succede nulla (laDIVall'interno delTHnon ereditano ilTHlarghezza) - il trucco
margin-left: auto; margin-right: auto;non dà un risultato
Anche usando due nidificato DIV all'interno del TH non è una soluzione, dal momento che le ast quello esterno deve riempire il TH, che non è il caso.
Il numero di colonne non è determinato a priori, perché la tabella riceverà i dati da un database e spetterà agli utenti decidere quali colonne verranno visualizzate. Questo mi impedisce anche di usare larghezze fisse.
Come si può centrare lo DIV all'interno della larghezza TH?
perché non si mette la "testata" sopra la tabella, quindi non può muoversi mentre si scorre la tabella ... C'è qualche ragione per cui deve essere all'interno della tabella negli elementi th? – SaschaP
Vedere http://stackoverflow.com/q/21168521/1064325 – falsarella
Vedere anche http://stackoverflow.com/q/17067294/1064325 – falsarella