带有标题

Question

我一直试图让标题保持固定。无论何时向下滚动以显示其他数据，始终<th>都会显示为可见。我尝试按照this post进行操作，但在position: block和<th>的样式中添加<td>，从此更改为此{{} 3}}与各自的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

我通过添加粘性属性@RachelGallen感谢

解决了这个问题

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