table with still header

Question

I've been trying to make the header stay fixed. No matter that when scroll down to show the other data, always the <th> are posted visible. I tried to do it by following this post but by adding position: block in the styles for <th> and <td>, the th change from this to this losing consistency th with their respective td and it stops me accepting the colspan, it stops me from showing the <th> below the respective <td>.

How could I make the header always visible without losing the table design?

.td2 {
  padding: 5px 7px !important;
  text-align: center !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="scroll-table-container" style="height: 300px">
  <table id="myTableLP" class="table scroll-table table-striped table-bordered table-condensed table-hover">
    <thead>
      <tr>
        <th class="component_name_header_col th" colspan="2">Descripción</th>
        <th class="component_name_header_col th" colspan="2">Inventario Inicial</th>
        <th class="component_name_header_col th" colspan="2">Ventas</th>
        <th class="component_name_header_col th" colspan="2">Entregas</th>
        <th class="component_name_header_col th" colspan="2">Devoluciones</th>
        <th class="component_name_header_col th" colspan="2">Merma</th>
        <th class="component_name_header_col th" colspan="2">Promoción</th>
        <th class="component_name_header_col th" colspan="2">Obsequio</th>
        <th class="component_name_header_col th" colspan="2">Recarga</th>
        <th class="component_name_header_col th" colspan="2">Inventario Sobrante</th>
        <th class="component_name_header_col th" colspan="2">Descarga</th>
        <th class="component_name_header_col th" colspan="2">Pedido Día Siguiente</th>
        <th class="component_name_header_col th" colspan="2">Inventario Total</th>
      </tr>
      <tr>
        <th>SKU
          <input type="text" id="LP" onkeyup="myFunctionLP(variable='LP',columna=0)" placeholder="">
        </th>
        <th>Producto
          <input type="text" id="LP2" onkeyup="myFunctionLP(variable='LP2',columna=1)" placeholder="">
        </th>
        <th>Cajas</th>
        <th>Piezas</th>
        <th>Cajas</th>
        <th>Piezas</th>
        <th>Cajas</th>
        <th>Piezas</th>
        <th>Cajas</th>
        <th>Piezas</th>
        <th>Cajas</th>
        <th>Piezas</th>
        <th>Cajas</th>
        <th>Piezas</th>
        <th>Cajas</th>
        <th>Piezas</th>
        <th>Cajas</th>
        <th>Piezas</th>
        <th>Cajas</th>
        <th>Piezas</th>
        <th>Cajas</th>
        <th>Piezas</th>
        <th>Cajas</th>
        <th>Piezas</th>
        <th>Cajas</th>
        <th>Piezas</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          2010101
        </td>
        <td>
          Product
        </td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
        <td class="td2">15</td>
      </tr>
    </tbody>
  </table>
</div>

"table is unbalanced and it stops me accepting the colspan"??? ``s and ``s accept colspan. Do you want ``? `position:fixed;`? Hard to understand your question. — StackSlave, Jun 08 '18 at 01:08
@PHPglue thank you for answer, I updated my post, I wanted to say that the th change losing consistency th with their respective td like the image — jeff, Jun 08 '18 at 20:05
Just a heads up: there's no such thing as `position: block`. — Heretic Monkey, Jun 10 '18 at 00:37
@jeff I added bootstrap into your snippet to see what the problem was. On scroll your table header didn't change position. Could you post the rest of your css that may be impacting? And to second Mike McCaughan, i think you're mixing up display:block with position attributes (static/fixed/relative/absolute..etc) .. try position:sticky; — Rachel Gallen, Jun 10 '18 at 00:37
Possible duplicate of [How to add a scrollbar to an HTML5 table?](https://stackoverflow.com/questions/17584702/how-to-add-a-scrollbar-to-an-html5-table) — Heretic Monkey, Jun 10 '18 at 00:38
@RachelGallen thanks for answer, I can solve it by adding the sticky property — jeff, Jun 13 '18 at 18:01

score 0 · Accepted Answer · answered Jun 13 '18 at 18:04

0

I solved it by adding the sticky property, @RachelGallen thanks

thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
  background-color: #ffffffb3;
}

answered Jun 13 '18 at 18:04

jeff

367
4
19

table with still header

1 Answers1