Fixe-Tête du Tableau avec Défilement de Page

Au départ de défilement, puis on les fixe en-tête du tableau avec défilement de page.

Je voudrais mettre une table quelque part au milieu de ma page web qui a le comportement suivant:

  1. Agit comme un "normal" de la table html pour la plupart... jusqu'à ce que vous faites défiler le passé de la table des en-têtes de
  2. Lorsque vous faites défiler le passé de la table des en-têtes, les en-têtes de tableau reste fixé à ou près du haut de la page, tandis que le reste de la table continue de défiler avec le reste du corps de la page. Ce n'est pas la même chose qu'un défilement <tbody> fixe <thead>.
  3. Des points de Bonus si la table des en-têtes de disparaître si vous faites défiler passé la dernière ligne de la table.
  4. Des points de Bonus si les lignes de la table disparaître comme ils défilement plus élevée que les en-têtes. (J'ai seulement besoin de cette fonctionnalité quand/si je devais essayer de placer la table fixe à tête dans un endroit différent de l'endroit tout en haut de la page)

Il devrait ressembler à quelque chose de similaire à l'exemple donné dans ce violon:

http://jsfiddle.net/yeAhU/260/

À l'exception de l'en-tête contenu de défilement vers le haut de la page avant de devenir fixe et le contenu de la table ne doit pas montrer au-dessus des têtes comme ça défile.

J'ai essayé légèrement optimisation les plus de réponses pour "table fixe à l'en-tête de défilement corps" questions en ligne, mais je ne suis pas en mesure d'obtenir le type de comportement je suis à la recherche à partir de ces exemples.

Je voudrais la solution en fonction de CSS si possible, mais je suis ouvert à d'autres solutions comme la JS.

Je voudrais la solution pour être compatible avec Chrome & Firefox.

QUESTION

Est-il possible de faire cela, et est-il possible de le faire en CSS?
Comment?

  • Hé là! Vous devez marquer une réponse comme correcte ici..
  • pas de. je n'ai pas été en mesure de finaliser quoi que ce soit concernant cette encore.
InformationsquelleAutor agent provocateur | 2016-05-16
  1. 14

    En CSS, vous pouvez utiliser position:sticky; mais depuis Firefox ne pas mélanger les deux si bien encore, vous devez toujours utiliser thead et tbody à casser la table-layout à utiliser collante. ... de réinitialisation de la table-layout sur tbody et set de table-layout fixe pour aider à tenir les colonnes visuellement ensemble de thead/tbody ... exemple :

    http://jsfiddle.net/yeAhU/261/ je crois qu'il répond à points :1,2,3 (qu'est-ce que 4 en fait ? )

    http://caniuse.com/#search=sticky

    chrome enlevé il y a un moment lien suivant pourrait être utile

    https://www.sitepoint.com/css-position-sticky-introduction-polyfills/

    CSS:

    tbody, thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
td {
  border:1px solid;
}
* {box-sizing:border-box; border-collapse:collapse;}

    HTML:

    Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>
<table width="400" border="0" style="display:block;">
<thead style="display:block;position: sticky;top:20px;background-color: grey;">
<tr>
<td width="200">
Name
</td>
<td width="200">
Age
</td>
</tr>
</thead>
<tbody>
<tr>
<td width="200">
&nbsp;
</td>
<td width="200">
&nbsp;
</td>
</tr>
<tr>
<td>
John
</td>
<td>
28
</td>
</tr>
<tr>
<td>
Jacob
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Nicole
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</td>
</tr>
<tr>
<td>
John
</td>
<td>
28
</td>
</tr>
<tr>
<td>
Jacob
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Nicole
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</td>
</tr>
<tr>
<td>
John
</td>
<td>
28
</td>
</tr>
<tr>
<td>
Jacob
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Nicole
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</td>
</tr>
<tr>
<td>
John
</td>
<td>
28
</td>
</tr>
<tr>
<td>
Jacob
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Nicole
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</td>
</tr></tbody>
</table>
Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>

    • génial... mais je voudrais qu'il a travaillé sur chrome car c'est notre "navigateur pris en charge".
    • #4 signifie que la ligne des entrées de devenir invisible, comme ils défilent passé l'en-tête du tableau. J'aurais seulement besoin de cette fonctionnalité si je devais essayer de placer le fixe-tête d'un tableau à un autre endroit que dans le haut de la page. Votre solution est capable de placer la table d'en-tête de la position fixe quelque part autre que le très haut de la page?
    • position collant et coordonates reportez-vous à la fenêtre.vous pouvez utiliser n'importe quel coordonates avec les valeurs , une fois le collant élément atteint le coordonates il reste encore jusqu'à quelque chose d'autre, il pousse loin :).... j'ai mis à jour le fragment de code avec un top:20px; peut être à gauche ou à droite ou en bas coordonates utilisé trop
    • collant ne fonctionne toujours pas avec google chrome .même préfixe ? serait-ce aussi aider : developers.google.com/web/updates/2012/08/... évidemment, il a été retiré
    • Est-il une raison pour laquelle vous avez mélangé la feuille de style styles avec des attributs de style en ligne? (J'ai trouvé la réponse déroutant au départ car je n'avais pas remarqué le style en ligne au premier abord.)
    • Le code est de le violon, j'ai mis à jour , où dans un premier temps (l'op) avait de style en ligne et la position:fixed; étant donné que le code est sa, j'ai prévu qu'il serait facile de voir la différence sans essayer de comprendre où et ce qui est différent . En effet, pas une bonne pratique que j'ai pu avoir aussi informés.
    • votre code semble fonctionner dans Chrome 62.
    • il se fait à nouveau maintenant depuis quelques mois, semble comme il va le rester cette fois 😉
    • J'ai essayé des dizaines de solutions différentes, et c'est le seul qui fonctionne pour moi, vous avez sauvé ma journée

    InformationsquelleAutor G-Cyr
  2. 2

    Voici votre solution..
    tripoter par Jonas Schubert Erlandsson

    <section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>

    et le css

    html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
    • Cette solution semble exactement comme les autres "scrolling <tbody> fixe <thead>" solutions comme mentionné dans mon #2. corrigez-moi si je me trompe.
    • Bon.. voici ce que vous cherchez. tympanus.net/codrops/2014/01/09/sticky-table-headers-columns
    • oh cool. mauvais désordre autour de lui un peu
    • alright. et si vous pouviez trouver votre chemin à travers elle.. n'oubliez pas de voter ou de la marque de corriger la réponse..!
    • je pourrais simplement utiliser bootstrap apposer. pas encore sûr, mais malade marque vous lorsque je obtenir à travers elle.
    • C'est très propre solution qui ne nécessite pas de supplément de pierres ou de plugins sur le dessus de ce que j'avais déjà. Où puis-je regarder pour savoir comment appliquer cette idée à la colonne la plus à gauche de la table ainsi?

    InformationsquelleAutor Tirthraj Rao