Comment puis-je verrouiller la première ligne et la première colonne d'une table lors du défilement, éventuellement à l'aide de JavaScript et de CSS?

Vous avez besoin de deux tables, où le premier est l'exacte superposition sur le second. Le second contient toutes les données, où le premier ne contient que la première colonne. Vous devez synchroniser la largeur et selon le contenu est également à la hauteur de ses lignes.

Supplémentaire à ces deux tables, vous avez besoin d'un troisième. C'est la première ligne qui pose exactement entre les deux autres et doit être synchronisée de la même façon.

Vous aurez besoin d'un positionnement absolu ici. Ensuite, vous devez synchroniser le défilement de la table de données avec le défilement des positions de la tête de ligne et la première colonne de la table.

Qui fonctionne très bien dans tous les principaux navigateurs, sauf pour un point: Le défilement synchronisé flottera. Pour corriger cela, vous avez besoin de deux outher div conteneurs qui détiennent un clone du contenu de l'en-tête de ligne et la première colonne. En cas de défilement vertical, vous affichez la ligne d'en-tête de clone pour éviter flottant, tandis que vous repositionner l'original dans le fond.
En cas de défilement horizontal, vous montrer la première ligne clone. Même chose ici.

Je l'ai fait avec une combinaison de:

• L'utilisation de plusieurs tables
• De taille fixe cellules
• de jQuery scrollTop et scrollLeft fonctions

Voici un jsfiddle exemple à démontrer.

Ne l'ai pas testé sur tous les navigateurs, mais j'imagine que c'est pas beaucoup sur les anciennes versions IE.

JS:

$("#clscroll-content").scroll(function() {
    $("#clscroll-row-headers").scrollTop($("#clscroll-content").scrollTop());
    $("#clscroll-column-headers").scrollLeft($("#clscroll-content").scrollLeft());
});

$("#clscroll-column-headers").scroll(function() {
    $("#clscroll-content").scrollLeft($("#clscroll-column-headers").scrollLeft());
});

$("#clscroll-row-headers").scroll(function() {
    $("#clscroll-content").scrollTop($("#clscroll-row-headers").scrollTop());
});

CSS:

.clscroll table {
    table-layout: fixed;
}

.clscroll td, .clscroll th { 
    overflow: hidden;
}

.corner-header {
    float: left;
}

.column-headers {
    float: left;
    overflow: scroll;
}

.row-headers {
    clear: both;
    float: left;    
    overflow: scroll;
}

.table-content {
    table-layout: fixed;
    float: left;
    overflow: scroll;
}

.clscroll td, .clscroll th { 
    width: 200px;
    border: 1px solid black;
}

.row-headers, .table-content {
    height: 100px;
}

.column-headers, .table-content, .table-content table, .column-headers table {
    width: 400px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clscroll corner-header">
<table>
<tr>
<th>&nbsp;</th>
</tr>
</table>
</div>
<div class="clscroll column-headers" id="clscroll-column-headers">
<table>
<tr>
<th>Bus</th>
<th>Plane</th>
<th>Boat</th>
<th>Bicycle</th>
</tr>
</table>
</div>
<div class="clscroll row-headers" id="clscroll-row-headers">
<table>
<tr>
<th>Red</th>
</tr>
<tr>
<th>Green</th>
</tr>
<tr>
<th>Blue</th>
</tr>
<tr>
<th>Orange</th>
</tr>
<tr>
<th>Purple</th>
</tr>
<tr>
<th>Yellow</th>
</tr>
<tr>
<th>Pink</th>
</tr>
<tr>
<th>Brown</th>
</tr>
</table>
</div>
<div class="clscroll table-content" id="clscroll-content">
<table>
<tr>
<td>Red Bus</td>
<td>Red Plane</td>
<td>Red Boat</td>
<td>Red Bicycle</td>
</tr>
<tr>
<td>Green Bus</td>
<td>Green Plane</td>
<td>Green Boat</td>
<td>Green Bicycle</td>
</tr>
<tr>
<td>Blue Bus</td>
<td>Blue Plane</td>
<td>Blue Boat</td>
<td>Blue Bicycle</td>
</tr>
<tr>
<td>Orange Bus</td>
<td>Orange Plane</td>
<td>Orange Boat</td>
<td>Orange Bicycle</td>
</tr>
<tr>
<td>Purple Bus</td>
<td>Purple Plane</td>
<td>Purple Boat</td>
<td>Purple Bicycle</td>
</tr>
<tr>
<td>Yellow Bus</td>
<td>Yellow Plane</td>
<td>Yellow Boat</td>
<td>Yellow Bicycle</td>
</tr>
<tr>
<td>Pink Bus</td>
<td>Pink Plane</td>
<td>Pink Boat</td>
<td>Pink Bicycle</td>
</tr>
<tr>
<td>Brown Bus</td>
<td>Brown Plane</td>
<td>Brown Boat</td>
<td>Brown Bicycle</td>
</tr>
</table>
</div>

Vous auriez à le tester, mais si vous avez intégré un iframe dans votre page, puis utilisé le CSS pour absolument position de la 1ère ligne & colonne 0,0 dans l'iframe page qui permettent de résoudre votre problème?

Comment une solution où vous mettez les "données" de la table à l'intérieur de son propre div, avec overflow: scroll;? Ensuite, le navigateur va automatiquement créer des barres de défilement pour la partie de la "table" vous ne voulez pas de verrouillage, et vous pouvez mettre la table en-tête"/première ligne juste au-dessus que <div>.

Pas sûr de comment cela pourrait fonctionner avec défilement horizontal si.

Vous pouvez le faire, sans javascript

voir ce lien:
http://yonax73.blogspot.com/2014/09/tabla-con-cabecera-estatica-cuerpo-con.html

ou de démonstration en direct:
http://jsfiddle.net/yonatanalexis22/aeeme8mt/7/

table{
border-spacing: 0;
display: flex;/*Se ajuste dinamicamente al tamano del dispositivo**/
max-height: 40vh; /*El alto que necesitemos**/
overflow-y: auto; /**El scroll verticalmente cuando sea necesario*/
overflow-x: hidden;/*Sin scroll horizontal*/
table-layout: fixed;/**Forzamos a que las filas tenga el mismo ancho**/
width: 98vw; /*El ancho que necesitemos*/
border:1px solid gray;}