I have been attempting to keep the header fixed so that, when scrolling down to view other data, the <th> elements always remain visible. I tried following the instructions in this post, but when adding position: block to the styles for <th> and <td>, the appearance of the th changes from this https://i.sstatic.net/OwsLG.png to this https://i.sstatic.net/saA7E.png, resulting in a lack of consistency between th and their respective td cells and preventing the acceptance of colspan which is blocking the display of the <th> below the corresponding <td>.
Is there a way to make the header always visible without compromising 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>
<... [continued] ...