0

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

1 respuesta 1

0

Prueba de la siguiente manera, no se si es lo que quieres lograr:

table {
  display: block;
  overflow-x: auto;
}

.static {
  position: fixed;
  background-color: white;
}

.first-col {
  padding-left: 74.5px!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table">
  <thead>
    <tr class="static">
      <th scope="col">FIJAR</th>
      <th  scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="static" scope="row">FIJAR</th>
      <td class="first-col">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th class="static" scope="row">FIJAR</th>
      <td class="first-col">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th class="static" scope="row">FIJAR</th>
      <td class="first-col">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
<tr>
  <th class="static" scope="row">FIJAR</th>
  <td class="first-col">Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th class="static" scope="row">FIJAR</th>
  <td class="first-col">Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th class="static" scope="row">FIJAR</th>
  <td class="first-col">Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th class="static" scope="row">FIJAR</th>
  <td class="first-col">Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th class="static" scope="row">FIJAR</th>
  <td class="first-col">Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th class="static" scope="row">FIJAR</th>
  <td class="first-col">Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr><tr>
  <th class="static" scope="row">FIJAR</th>
  <td class="first-col">Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th class="static" scope="row">FIJAR</th>
  <td class="first-col">Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th class="static" scope="row">FIJAR</th>
  <td class="first-col">Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th class="static" scope="row">FIJAR</th>
  <td class="first-col">Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>

  </tbody>
</table>

12
  • Se me fija los productos, pero la cabecera con los dias no se me fija
    – bemoba1437
    Commented el 5 ene. 2021 a las 14:47
  • 1
    Pero estas pidiendo fijar la columna izquierda en el post. Corrigelo, y especifica que quieres que la las primeras filas y la primera columna son las que quieres fijas..
    – Excorpion
    Commented el 5 ene. 2021 a las 14:59
  • Es lo que pedias en el post Commented el 5 ene. 2021 a las 15:08
  • @Excorpion si pero lo de la cebecera fija ya lo tengo y me di cuenta que solo funciona en mozilla y no en chrome, pedi que tambien pudiera ser fijo la columna izquierdo agregando a lo que ya tengo (la cabecera fija), igual lo editare
    – bemoba1437
    Commented el 5 ene. 2021 a las 15:11
  • 1
    @bemoba1437 El problema es que has hecho que franco solo vea lo de la columna izquierda, si aplicas su solución, no funcionará lo que has solicitado, por que el corrigió esos errores. Ahora, el ha actualizado su respuesta conforme tu correcta solicitud. Por favor checkea y respóndele a el. (ya lo has hecho)
    – Excorpion
    Commented el 5 ene. 2021 a las 15:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.