Ayuda en la programación, respuestas a preguntas / Javascript / ¿Cómo hago que mi desplazamiento de CSS se fije en el encabezado de la tabla y en la primera columna (también estoy abierto a la idea usando JS o JQuery) - javascript, jquery, html, css

¿Cómo puedo hacer que mi desplazamiento de CSS se fije al encabezado de la tabla y la primera columna (también estoy abierto a la idea con JS o JQuery)? JavaScript, jquery, html, css

Estoy luchando tratando de mantener la columna izquierda dondelos nombres de mis elementos son de desplazamiento cuando se mueve a la izquierda y derecha de mi tabla de matriz. También quiero evitar que la tabla de encabezado superior se desplace al mover hacia arriba y hacia abajo la barra de desplazamiento. ¿Puedo hacer esto en CSS? Estoy usando bootstrap. Estaría bien haciéndolo en JavaScript o JQuery si tuviera que hacerlo. He intentado cambiar mi código para tener un encabezado fijo, pero se ve todo desordenado.

Mi código en violín

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>

Respuestas

0 para la respuesta № 1

Tuve el mismo problema dos días antes. La forma en que he hecho este trabajo es hacer dos tablas una debajo de la otra. Así que la tabla superior será el encabezado, y la tabla inferior será el cuerpo de su tabla. Así que la tabla de "encabezado" se sentará en su lugar y la segunda tabla necesitará overflow:auto. También debes quitar la barra de desplazamiento de la segunda tabla para dejar que se mantenga el ancho.

El inconveniente de esta implementación es que debe definir anchos para todas las columnas de sus dos tablas para que encajen entre sí correctamente.

Por cierto, puedes definir text-align: center en tu css para th y td.

Déjame saber por favor si necesitas más ayuda.