Estoy trabajando en una tabla desde HTML y CSS, lo que necesito es generar una tabla la cual el contenido dentro de las etiquetas thead quede estático la cual obviamente es la cabecera de una tabla, y el contenido dentro de tbody se genere un scroll vertical. Y tengo el siguiente codigo pero no he podido generar esa funcionalidad, si alguien me pudiera ayudar.
Codigo HTML:
<div class="scroll-div-tablas" id="TablaContenedor" style="height: 315px;">
<table class="ListaTabla" id="Topicos_Datatable">
<thead id="Topicos_Cabecera_Datos">
<tr>
<th style="width: 5%;"></th>
<th id="th" style="width: 10%;">Clave</th>
<th id="th" style="width: 15%;">Tópico</th>
<th id="th" style="width: 20%;">Descripción</th>
<th id="th" style="width: 20%;">Objetivo</th>
<th id="th" style="width: 20%;">Justificación</th>
<th id="th" style="width: 20%;">Área de estudio</th>
</tr>
</thead>
<tbody id="gtnp_Listado_Datos">
<tr>
<td><input name="topic" id="radiobtn28" type="radio" value="28"></td>
<td title="002" id="td" onclick="TopicosModule.elementoSeleccionado(28)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">002</p></td>
<td title="Soporte Técnico." id="td" onclick="TopicosModule.elementoSeleccionado(28)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Soporte Técnico.</p></td>
<td title="Evaluaciones correspondiente a soporte Tecnico." id="td" onclick="TopicosModule.elementoSeleccionado(28)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Evaluaciones correspondiente a soporte Tecnico.</p></td>
<td title="Las evaluaciones que son parte de este tópico son relacionadas a soporte técnico." id="td" onclick="TopicosModule.elementoSeleccionado(28)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Las evaluaciones que son parte de este tópico son relacionadas a soporte técnico.</p></td>
<td title="Conocer el grado de conocimiento." id="td" onclick="TopicosModule.elementoSeleccionado(28)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Conocer el grado de conocimiento.</p></td>
<td title="Soporte Técnico." id="td" onclick="TopicosModule.elementoSeleccionado(28)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Soporte Técnico.</p></td>
</tr>
<tr>
<td><input name="topic" id="radiobtn29" type="radio" value="29"></td>
<td title="003" id="td" onclick="TopicosModule.elementoSeleccionado(29)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">003</p></td>
<td title="Desarrollo." id="td" onclick="TopicosModule.elementoSeleccionado(29)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Desarrollo.</p></td>
<td title="Evaluaciones de aplicaciones para desarrollo." id="td" onclick="TopicosModule.elementoSeleccionado(29)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Evaluaciones de aplicaciones para desarrollo.</p></td>
<td title="Evaluar los conocimientos de los usuarios encuestados referente a las distintas aplicaciones de desarrollo." id="td" onclick="TopicosModule.elementoSeleccionado(29)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Evaluar los conocimientos de los usuarios encuestados referente a las distintas aplicaciones de desarrollo.</p></td>
<td title="Mediantes las encuestas relacionadas a este tópico se evaluaran a los usuarios para medir el grado de conocimiento sobre una aplicación especifica." id="td" onclick="TopicosModule.elementoSeleccionado(29)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Mediantes las encuestas relacionadas a este tópico se evaluaran a los usuarios para medir el grado de conocimiento sobre una aplicación especifica.</p></td>
<td title="Desarrollo." id="td" onclick="TopicosModule.elementoSeleccionado(29)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Desarrollo.</p></td>
</tr>
<tr>
<td><input name="topic" id="radiobtn42" type="radio" value="42"></td>
<td title="004" id="td" onclick="TopicosModule.elementoSeleccionado(42)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">004</p></td>
<td title="Topicos PMBOK" id="td" onclick="TopicosModule.elementoSeleccionado(42)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Topicos PMBOK</p></td>
<td title="Topicos PMBOK" id="td" onclick="TopicosModule.elementoSeleccionado(42)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Topicos PMBOK</p></td>
<td title="Topicos PMBOK" id="td" onclick="TopicosModule.elementoSeleccionado(42)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Topicos PMBOK</p></td>
<td title="Topicos PMBOK" id="td" onclick="TopicosModule.elementoSeleccionado(42)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Topicos PMBOK</p></td>
<td title="Topicos PMBOK" id="td" onclick="TopicosModule.elementoSeleccionado(42)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Topicos PMBOK</p></td>
</tr>
</tbody>
</table>
</div>
Código CSS:
#Topicos_Datatable {
table-layout: fixed;
width: 100%;
}
table.ListaTabla {
width: 100%;
color: #666;
border: none;
font-family: "century gothic", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
div .ListaTabla {
border: 2px solid lightgray !important;
}
.ListaTabla th {
background-color: #E6E6E6;
color: #727374;
font-size: 12px;
border: 2px solid #D1D0C6;
border-collapse: collapse;
font-family: "Century Gothic";
}
#Topicos_Datatable {
table-layout: fixed;
width: 100%;
}
table.ListaTabla td {
color: #000;
font-size: 8pt;
border: 2px solid #D1D0C6;
border-collapse: collapse;
}
thead, tbody { display: block; }
tbody {
height: 315px;
overflow-y: auto;
overflow-x: hidden;
}
thead {
height: 37px;
overflow-y: auto;
overflow-x: hidden;
}
He actualizado un poco el código