Debo realizar una tabla como la que adjunto en la imagen, esta debe ser similar y funcionar similar tan solo que no encuentro como lograr eso. :S
.table11a table>thead>tr{
background-color: #333333;
color: white;
}
.table11a table>thead>th{
background-color: #333333;
padding-top:5px;
padding-bottom:5px;
text-align: center;
}
.table11a table>tbody>tr{
border-right: 1px solid;
}
.table11a table>tbody>tr>td{
border-right: 1px solid;
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="span12" style="margin: 0px;width:100%">
<!----------------------------------Tabla Normal-------------------------------------------------------------------------->
<table class="table11a" style="margin: 0px; width: 100%">
<tbody><tr><th style="background-color:#555555; color:white; margin-right: 10px;border-top-left-radius: 3px;">
<div style="background-color: #639B5E; height: 10px; width: 10px; display: inline-block;"></div>
<span style="margin-right: 10px">Excelente</span>
</th>
<th style="background-color:#555555; color:white; margin-right: 10px;">
<div style="background-color: #9F972A; height: 10px; width: 10px; display: inline-block;"></div>
<span style="margin-right: 10px">Bueno</span>
</th>
<th style="background-color:#555555; color:white; margin-right: 10px;">
<div style="background-color: #A4434A; height: 10px; width: 10px; display: inline-block;"></div>
<span style="margin-right: 10px">Aceptable</span>
</th>
<th style="background-color:#555555; color:white; margin-right: 10px;">
<span style="margin-right: 10px">Malo</span>
</th>
<th style="background-color:#555555; color:white; margin-right: 10px; border-top-right-radius: 3px;">
<div style="background-color: #3B7AAF; height: 10px; width: 10px; display: inline-block;"></div>
<span style="margin-right: 10px;">Muy malo</span>
</th>
<th></th>
</tr></tbody></table>
<table class="span12" style="border: 0px solid #8f8f8f; width:100%; margin: 0px;" id="tabla_evaluacion">
<tbody><tr><th>
<table class="table-striped" style="font-family: 'Arial'">
<thead>
<tr style="background-color:#555555; color:white; font-size: 12px;">
<th scope="col" style="width: 180px; text-align: left;">JUGADOR
</th>
<th scope="col" style="cursor:pointer; padding:0px; width: 100px; text-align: left;">
POSICION
</th>
<th scope="col" style="cursor:pointer; padding:0px; width: 36px; text-align: left;">
AÑO
</th>
</tr>
</thead>
<thead>
<tr style="background-color: #333; color: white;">
<th colspan="3" style="border-left: 1px solid; font-size: large;">ARQUEROS</th>
</tr>
</thead>
<tbody>
<tr>
<td> Cerda Favian</td>
<td>Arquero</td>
<td>1990</td>
</tr>
<tr>
<td> Cerda Favian</td>
<td>Arquero</td>
<td>1990</td>
</tr>
<tr>
<td> Cerda Favian</td>
<td>Arquero</td>
<td>1990</td>
</tr>
</tbody>
<thead>
<tr style="background-color: #333; color: white;">
<th colspan="3" style="border-left: 1px solid; font-size: large;">DEFENSAS</th>
</tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
<thead>
<tr style="background-color: #333; color: white;">
<th colspan="3" style="border-left: 1px solid; font-size: large;">CENTRALES</th>
</tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
<thead>
<tr style="background-color: #333; color: white;">
<th colspan="3" style="border-left: 1px solid; font-size: large;">DELANTEROS</th>
</tr>
<tr style="background-color: #333; color: white;">
<th colspan="3" style="border-left: 1px solid;height: 15px;"></th>
</tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</th>
<!--//////////////////////////////// TABLA SCROLL ////////////////////////////////////-->
<th class="">
<div style="overflow: scroll; overflow-y: hidden; width: 783px;">
<table class="table-striped" style="font-family: 'Arial';">
<thead>
<tr style="background-color:#555555; color:white; font-size: 12px;">
<th scope="col" colspan="2" style=""> ALTURA
</th>
<th scope="col" colspan="2" style=""> PESO
</th>
<th scope="col" colspan="2" style=""> SUM6P
</th>
<th scope="col" colspan="4" style=""> %ADIP
</th>
<th scope="col" colspan="4" style=""> KG ADIP
</th>
<th scope="col" colspan="4" style=""> % MUSC
</th>
<th scope="col" colspan="4" style=""> KG MUSC
</th>
<th scope="col" colspan="4" style=""> ÍNDICE MUSCULAR ÓCEO (IMO)
</th>
<th scope="col" style=" width: 500px;">
</th>
</tr>
</thead>
<thead>
<tr style="background-color: #333; color: white;">
<th style="border-right: 1px solid grey; font-size: 14px;">EV1</th>
<th style="border-right: 1px solid grey; font-size: 14px;">EV2</th>
<th style="border-right: 1px solid grey; font-size: 14px;">EV1</th>
<th style="border-right: 1px solid grey; font-size: 14px;">EV2</th>
<th style="border-right: 1px solid grey; font-size: 14px;">EV1</th>
<th style="border-right: 1px solid grey; font-size: 14px;">EV2</th>
<th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV1</th>
<th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV2</th>
<th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV1</th>
<th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV2</th>
<th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV1</th>
<th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV2</th>
<th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV1</th>
<th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV2</th>
<th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV1</th>
<th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV2</th>
<th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
</tr>
</thead>
<tbody>
<tr style="text-align: center;">
<td style="padding: 4px 8px;">182.1</td>
<td style="padding: 4px 8px; font-style: bold;">182.1</td>
<td style="padding: 4px 8px;">91</td>
<td style="padding: 4px 8px; font-style: bold;">91</td>
<td style="padding: 4px 8px;">63.5</td>
<td style="padding: 4px 8px; font-style: bold;">61</td>
<td style="padding: 4px 8px;">20.2%</td>
<td style="padding: 4px 8px; font-style: bold;">Aceptable</td>
<td style="padding: 4px 8px; font-style: bold;">20%</td>
<td style="padding: 4px 8px; font-style: bold;">Aceptable</td>
<td style="padding: 4px 8px;">18.4</td>
<td style="padding: 4px 8px; font-style: bold;">Aceptable</td>
<td style="padding: 4px 8px; font-style: bold;">18.2</td>
<td style="padding: 4px 8px; font-style: bold;">Aceptable</td>
<td style="padding: 4px 8px;">51.8%</td>
<td style="padding: 4px 8px; font-style: bold;">Aceptable</td>
<td style="padding: 4px 8px; font-style: bold;">51.6%</td>
<td style="padding: 4px 8px; font-style: bold;">Aceptable</td>
<td style="padding: 4px 8px;">37.3</td>
<td style="padding: 4px 8px; font-style: bold;">Aceptable</td>
<td style="padding: 4px 8px; font-style: bold;">37.2</td>
<td style="padding: 4px 8px; font-style: bold;">Aceptable</td>
<td style="padding: 4px 8px;">3.65</td>
<td style="padding: 4px 8px; font-style: bold;">Aceptable</td>
<td style="padding: 4px 8px; font-style: bold;">3.57</td>
<td style="padding: 4px 8px; font-style: bold;">Aceptable</td>
<td></td>
</tr>
<tr style="text-align: center;">
<td style="padding: 4px 8px;">182.1</td>
<td style="padding: 4px 8px;">182.1</td>
<td style="padding: 4px 8px;">91</td>
<td style="padding: 4px 8px;">91</td>
<td style="padding: 4px 8px;">63.5</td>
<td style="padding: 4px 8px;">61</td>
<td style="padding: 4px 8px;">20.2%</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">20%</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">18.4</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">18.2</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">51.8%</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">51.6%</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">37.3</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">37.2</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">3.65</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">3.57</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td></td>
</tr>
<tr style="text-align: center;">
<td style="padding: 4px 8px;">182.1</td>
<td style="padding: 4px 8px;">182.1</td>
<td style="padding: 4px 8px;">91</td>
<td style="padding: 4px 8px;">91</td>
<td style="padding: 4px 8px;">63.5</td>
<td style="padding: 4px 8px;">61</td>
<td style="padding: 4px 8px;">20.2%</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">20%</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">18.4</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">18.2</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">51.8%</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">51.6%</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">37.3</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">37.2</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">3.65</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td style="padding: 4px 8px;">3.57</td>
<td style="padding: 4px 8px;">Aceptable</td>
<td></td>
</tr>
</tbody>
<thead>
<tr style="background-color: #333; color: white;">
<th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
<th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
</tr>
</thead>
<thead>
<tr style="background-color: #333; color: white;">
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
</tr>
</thead>
<thead>
<tr style="background-color: #333; color: white;">
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
<th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
</tr>
</thead>
</table>
</div>
</th>
</tr></tbody></table>
<br>
</div>
Esta tabla debe tener un Scroll en la parte superior derecha que cuando lo mueva, deben visualizarse otras partes de la tabla, pero solo debe moverse toda la seccion que esta con el recuadro rojo. el resto debe permanecer estatico, como puedo hacer esto?, alguien tiene algun ejemplo? necesito ayuda. Gracias
Adicionalmente el codigo base de la tabla para que se visualice mejor, aunque actualmente no funciona lo que se desea.