Aide à la programmation, réponses aux questions / Javascript / Comment puis-je fixer mon défilement CSS dans l'en-tête du tableau et dans la première colonne (je suis également ouvert à l'idée d'utiliser JS ou JQuery) - javascript, jquery, html, css

Comment faire pour que mon défilement CSS soit fixé à l’en-tête de la table et à la première colonne (je suis également ouvert à l’idée avec JS ou JQuery) - javascript, jquery, html, css

Je me bats pour essayer de garder la colonne de gauche oùLes noms de mes éléments proviennent du défilement lorsque vous vous déplacez à gauche et à droite de ma table matricielle. Je souhaite également que la table d'en-tête supérieure ne défile pas lorsque vous déplacez la barre de défilement vers le haut et le bas. Puis-je le faire en CSS? J'utilise bootstrap. Je serais ok si je le fais en JavaScript ou JQuery. J’ai essayé de changer mon code pour avoir un en-tête fixe, mais ça a l'air complètement foiré.

Mon code en violon

div.scroll {
width: 99%;
height: 100px;
overflow: scroll;
}

<h1><strong>Inventories</strong></h1>

<div class="scroll">
<table class="table table-striped" style="width:1500px">
<thead>
<tr>
<th></th>
<th style="text-align: center">Atlanta</th>
<th style="text-align: center">Detroit</th>
<th style="text-align: center">Orlando</th>
<th style="text-align: center">Rochester</th>
<th style="text-align: center">Bellevue </th>
<th style="text-align: center">Madison </th>
<th style="text-align: center">Santa Barbara </th>
<th style="text-align: center">Bismarck </th>
<th style="text-align: center">Ann Arbor</th>
<th style="text-align: center">Sioux Falls</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center ">Apple MacBook Air</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center ">Asus Zenbook</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center ">Dell XPS</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
</tr>
<td style="text-align: center ">Acer Travelmate P645.</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center ">Sony Vaio Pro 13 Touch</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center ">Samsung ATIV Book 9 Plus 13-inch (2015)</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
</tr>
<td style="text-align: center ">HP Spectre X360.</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center ">MacBook</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
</tr>
<tr>
<td style="text-align: center "> UX305</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
</tr>
<tr>
<td style="text-align: center ">Lenovo ThinkPad T450s (Business Laptop)</td>
<td style="text-align: center ">7</td>
<td style="text-align: center ">5</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">3</td>
<td style="text-align: center ">2</td>
<td style="text-align: center ">4</td>
<td style="text-align: center ">4</td>
</tr>
</tbody>
</table>
</div>

Réponses:

0 pour la réponse № 1

J'ai eu le même problème deux jours avant. La façon dont j'ai fonctionné est de faire deux tables l'une sous l'autre. Ainsi, la table du haut sera l'en-tête et la table du bas sera le corps de la table. Donc, la table "en-tête" restera sur place et la deuxième table devra overflow:auto. En outre, vous devez supprimer la barre de défilement du deuxième tableau pour lui permettre de conserver sa largeur.

Le point négatif de cette implémentation est que vous devez définir des largeurs pour toutes les colonnes de vos deux tableaux afin de les adapter les unes aux autres.

Au fait, vous pouvez définir text-align: center dans votre css pour th et td.

Faites-moi savoir s'il vous plaît si vous avez besoin de plus d'aide.