1

Necesito que la primer columna quede Fija, "fixed", es decir que yo pueda hacer scroll sobre el eje X y se siga mostrando los datos de la primera columna.

ESTOY UTILIZANDO BOOTSTAP 3

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
  <thead>
    <tr>
      <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 scope="row">FIJAR</th>
      <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>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>

    </tr>
    <tr>
    <th scope="row">FIJAR</th>
      <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>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>

    </tr>
    <tr>
      <th scope="row">FIJAR</th>
      <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>
          <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>

    </tr>
  </tbody>
</table>

2 respuestas 2

3

Asignale position: absolute a la columna que quieres que se mantenga fija, y padding-left: 74.5px!important; a la siguiente para que pueda visualizarse

Probado en Firefox, Chrome y Safari

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

.static {
  position: absolute;
  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>
      <th class="static" scope="col">FIJAR</th>
      <th class="first-col" 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>
  </tbody>
</table>

3
  • Quise utilizar tu ejemplo y funciona pero cuando pones texto de mayor longitud en la columna que va a quedar fija se empalma con la siguiente columna Commented el 2 oct. 2019 a las 17:33
  • @JorgeAlonso por el momento no he encontrado una forma de hacer que se adapte al ancho de la columna, podrías modificar el tamaño en padding-left en la clase .first-col
    – user22721
    Commented el 9 oct. 2019 a las 12:51
  • me pasa lo mismo que comenta @JorgeAlonso Commented el 30 sept. 2022 a las 15:16
0

Código html:

 <div>
      <table class="sticky">
        <thead>
          <tr>
            <th class="headcol">RM</th>
            <th>Average</th>
            <th>Lala</th>
            <th>Lilo</th>
            <th>Epley</th>
            <th>Mayhew</th>
            <th>O'Conner</th>
            <th>Roco</th>
            <th>Lander</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="headcol">1RM</td>
            <td style="font-size: 120%;"><strong>12</strong>
            </td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
          </tr>
          <tr>
            <td class="headcol">2RM</td>
            <td><strong>11</strong>
            </td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
          </tr>
          <tr>
            <td class="headcol">3RM</td>
            <td><strong>10</strong>
            </td>
            <td>10</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
          </tr>
          <tr>
            <td class="headcol">4RM</td>
            <td><strong>10</strong>
            </td>
            <td>10</td>
            <td>11</td>
            <td>10</td>
            <td>11</td>
            <td>11</td>
            <td>10</td>
            <td>11</td>
          </tr>
          <tr>
            <td class="headcol">5RM</td>
            <td><strong>10</strong>
            </td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
          </tr>
          <tr>
            <td class="headcol">6RM</td>
            <td><strong>10</strong>
            </td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
          </tr>
          <tr>
            <td class="headcol">7RM</td>
            <td><strong>9</strong>
            </td>
            <td>9</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>9</td>
            <td>10</td>
          </tr>
          <tr>
            <td class="headcol">8RM</td>
            <td><strong>9</strong>
            </td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>10</td>
            <td>10</td>
            <td>9</td>
            <td>9</td>
          </tr>
          <tr>
            <td class="headcol">9RM</td>
            <td><strong>9</strong>
            </td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>10</td>
            <td>10</td>
            <td>9</td>
            <td>9</td>
          </tr>
          <tr>
            <td class="headcol">10RM</td>
            <td><strong>9</strong>
            </td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
          </tr>
        </tbody>

      </table>

</div>

Código css:

div {
  overflow-x:scroll;  
  margin-left:2em;
    }
.headcol {
  position:absolute;
    width:2em;
    left:0;
    }
2
  • No funciona en mi ejemplo con Bootstrap 3
    – nawelittle
    Commented el 15 ene. 2018 a las 18:01
  • Debes agregar una explicación de tu código, revisar Cómo responder.
    – Jorgesys
    Commented el 2 feb. 2018 a las 16:34

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.