lo que quiero hacer es que el lado izquierdo sea fijo, nose mucho de css asi que buscando informacion solo pude hacer la cabecera fija, pero nose como hacer el lado izquierdo de productos
que sea fijo tambien para que se haga scroll tanto vertical como horizontalmente asi que en esta parte me quede truncado sin poder avanzar.
Esto es lo que hice hasta ahora
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<style type="text/css">
thead {
position: sticky;
top: 0;
z-index: 10;
background-color: #ffffff;
}
.table-responsive {
height: 500px;
overflow: scroll;
}
</style>
<body>
<table class="table table-bordered text-center">
<thead class="thead-dark">
<tr>
<th class="header" scope="col" colspan="14">Dias Calendario</th>
</tr>
<tr>
<th class="header" scope="col">Producto</th>
<th class="header" scope="col">01</th>
<th class="header" scope="col">02</th>
<th class="header" scope="col">03</th>
<th class="header" scope="col">04</th>
<th class="header" scope="col">05</th>
<th class="header" scope="col">06</th>
<th class="header" scope="col">07</th>
<th class="header" scope="col">08</th>
<th class="header" scope="col">09</th>
<th class="header" scope="col">10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manzana</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td>X</td>
<td></td>
<td>X</td>
</tr>
<tr>
<td>Platano</td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td></td>
</tr>
<tr>
<td>Fresa</td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td></td>
</tr>
<tr>
<td>Leche</td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>Naranja</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>Atun</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td>X</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td>X</td>
</tr>
</tbody>
</table>
</body>
</html>
Si no me entendieron, quier que productos
sea fijo para hacer scroll horizontalmente ya que los dias "01-02-03" son los dias de los meses que llegan hasta el 30 y serviria mucho hacer ese scroll para que el usuario no tenga que estar viendo por celular
que producto tiene marcado
Si me podrian ayudar en esto, gracias
EDIT01: Me he dado cuenta que la cabecera fija solo funciona en mozilla y no en chrome, hay alguna forma en que funcione ahi tambien?
EDIT02: Lo que quiero hacer exactamente es esto https://github.com/twlikol/GridViewScroll como ven esta la cabecera fija y columna izquierda fija