0

Por favor necesito ayuda para dejar fijo el header de mi tabla con bootstrap. Probé con varios ejemplos que circulan pero en ninguno consigo el resultado deseado.

Mi tabla contiene 11 columnas y esta dentro de un div responsive:

<div class="panel panel-default">
<div class="panel-body">
<h4>TABLA</h4><br>
<div class="row">
<div class="col-sm-12"><br>
<div class="table-responsive table-bordered">          
  <table class="table">
    <thead>
      <tr>
        <th>Columna 1</th>
        <th>Columna 2</th>
        <th>Columna 3</th>
        <th>Columna 4</th>
        <th>Columna 5</th>
        <th>Columna 6</th>
        <th>Columna 7</th>
        <th>Columna 8</th>
        <th>Columna 9</th>
        <th>Columna 10</th>
        <th>Columna 11</th>
      </tr>
    </thead>
    <tbody>

<!--ACA UN BUCLE FOR PHP RECORRIENDO UNA TABLA MySQL (cada registro de la BD es un registro de la tabla, en mi caso son unos 100-->

</tbody>
</table>

¿Como puedo dejarlo fijo el encabezado?

3
  • 2
    Bienvenido a Stack Overflow en Español. lee cómo crear una buena pregunta. Debes editar tu pregunta con el código que hayas intentado, errores, etc. Debes agregar mas código. ¿qué usaste para lograr la funcionalidad que mencionas? edita tu pregunta. el 15 may. 2017 a las 22:53
  • Hay un plugin que se llama handsontable quizá sea lo que busques, aclaro que es de paga, no lo he usado, pero lo he visto
    – JuankGlezz
    el 16 may. 2017 a las 15:10
  • No, handstone lo conozco y es un poco más de lo que necesito. Solo necesito que quede fijo el header de mi tabla porque tiene cientos de registros y 11 columnas entonces al bajar uno termina perdiendo la referencia de que es cada columna. Vi varios ejemplos pero en todos mis columnas no entraban en la pantalla por lo que se situaban algunas por debajo del header..
    – tomas_L
    el 16 may. 2017 a las 18:30

2 respuestas 2

1

Aqui tienes un ejemplo de como hacerlo, deja fijo el encabezado y hace scroll del tbody. https://codepen.io/yavuzselim/pen/LNYrBd

Editado: Añado aquí un resumen del código que hay en la página enlazada

<div class="container">
  <table class="table table-fixed">
    <thead>
      <tr>
        <th class="col-xs-3">First Name</th>
        <th class="col-xs-3">Last Name</th>
        <th class="col-xs-6">E-mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>    
      .........
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
    </tbody>
  </table>
</div>

Css:

body{
  background-color: #bdc3c7;
}
.table-fixed{
  width: 100%;
  background-color: #f3f3f3;
  tbody{
    height:200px;
    overflow-y:auto;
    width: 100%;
    }
  thead,tbody,tr,td,th{
    display:block;
  }
  tbody{
    td{
      float:left;
    }
  }
  thead {
    tr{
      th{
        float:left;
       background-color: #f39c12;
       border-color:#e67e22;
      }
    }
  }
}
1
  • Añadido Álvaro.
    – Carmen
    el 19 may. 2017 a las 13:20
1

Nada mas es agregar un "position: fixed;" a la clase de tu tabla, modificando tu codigo queda así:

body{
  height: 1000px;
} // Height example  //

thead{
  position:fixed;
}
<div class="panel panel-default">
<div class="panel-body">
<h4>TABLA</h4><br>
<div class="row">
<div class="col-sm-12"><br>
<div class="table-responsive table-bordered">          
  <table class="table">
    <thead>
      <tr>
        <th>Columna 1</th>
        <th>Columna 2</th>
        <th>Columna 3</th>
        <th>Columna 4</th>
        <th>Columna 5</th>
        <th>Columna 6</th>
        <th>Columna 7</th>
        <th>Columna 8</th>
        <th>Columna 9</th>
        <th>Columna 10</th>
        <th>Columna 11</th>
      </tr>
    </thead>
    <tbody>

<!--ACA UN BUCLE FOR PHP RECORRIENDO UNA TABLA MySQL (cada registro de la BD es un registro de la tabla, en mi caso son unos 100-->

</tbody>
</table>

https://codepen.io/TheArgonaut/pen/aWxNPa

Puedes, de igual forma, agregar algo mas en el css para posicionarlo correctamente, o un javascript que cambie automaticamente el posicionamiento del encabezado al bajar el scroll bar.

Tu Respuesta

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

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