Bootstrap Fixed Header Responsive Table

Question

Bootstrap Fixed Header Responsive Table

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Please I need help to set the header of my board with bootstrap. I tried several examples that circulate but in none I get the desired result.

My table contains 11 columns and is within a 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>

How can I leave the header fixed?

mysql html php css bootstrap

asked by tomas_L 16.05.2017 в 00:48

source

2 answers

Create JSTL accumulator error: int can not be deferenced

score 1 · Answer 1

Here is an example of how to do it, leave the header fixed and scroll the tbody. link

Edited: I add here a summary of the code that is on the linked page

<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">[email protected]</td>
      </tr>    
      .........
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">[email protected]</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;
      }
    }
  }
}

score 0 · Answer 2

Nothing else is to add a "position: fixed;" to the class of your table, modifying your code is like this:

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>

link

You can also add something else in the css to position it correctly, or a javascript that automatically changes the positioning of the header when downloading the scroll bar.