时间戳

首页 > 解决方案 > 带有静止标题的表格

html - 带有静止标题的表格

问题描述

我一直在努力使标题保持固定。无论向下滚动以显示其他数据时，始终<th>发布可见。我试图通过遵循这篇文章来做到这一点，但是通过添加position: block和的样式<th>，<td>从这个变化这个到这个这个失去一致性 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>

标签： htmlcsstwitter-bootstrap-3

解决方案

我通过添加粘性属性解决了它，@RachelGallen 谢谢

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

推荐阅读