таблица с неподвижным заголовком

Question

Я пытался сделать заголовок фиксированным.Неважно, что при прокрутке вниз для отображения других данных всегда отображаются <th>.Я попытался сделать это, следуя этому посту , но, добавив position: block в стилях для <th> и <td>, th-й изменился с этого на этот теряет последовательность th с их соответствующим td, и это мешает мне принять colspan, мешает мне показать <th> ниже соответствующего <td>.

Как я могсделать заголовок всегда видимым без потери дизайна таблицы?

.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>

Answer 1

Я решил это, добавив свойство sticky, @RachelGallen спасибо

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