3

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&nbsp;de aplicaciones para desarrollo." id="td" onclick="TopicosModule.elementoSeleccionado(29)"><p style="margin: 0px auto; line-height: 1.3; font-size: 11px;">Evaluaciones&nbsp;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

3
  • Hola José, por favor coloca el código en tu publicación; de igual forma se puede poner código ejecutable. Si el enlace en cuestión cae, no se podría reproducir tu problema debido a que no habrá código.
    – gugadev
    Commented el 19 jun. 2017 a las 16:51
  • Hola Gustavo gracias lo tomaré en cuenta
    – José MN
    Commented el 19 jun. 2017 a las 17:10
  • Si lo tomas en cuenta para esta pregunta sería genial..
    – gugadev
    Commented el 19 jun. 2017 a las 17:15

2 respuestas 2

2

Simplifica. Tienes mucho código que no hace nada. Empieza por este css, sólo escribe este código, y luego ves añadiendo lo que necesites para que se adapte a tu diseño. He añadido una nueva clase (header_fijo) a la tabla respetando tus id's y a mi me funciona:

<table class="ListaTabla header_fijo" id="Topicos_Datatable">

Y el css:

.header_fijo {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.header_fijo thead {
  background-color: #333;
  color: #FDFDFD;
}
.header_fijo thead tr {
  display: block;
  position: relative;
}
.header_fijo tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
2
  • Hola Javi, gracias por tu respuesta, estoy tratando de implementarla
    – José MN
    Commented el 19 jun. 2017 a las 17:11
  • No me funciona, estoy usando un datatable dentro de un modal, no se si eso tenga algo que ver :(
    – C47
    Commented el 22 mar. 2019 a las 17:05
0

Yo utilice exactamente este desarrollo de GitHub , viene documentado y explicado

Te deja congelar filas en la cabecera y a la izquierda para que funcione como si fuera excel , obvio con un origen de datos dinamicos , sql , notepad, texto plano etc etc , sirve con javascript y html y el codigo es muy limpio y te permite editar el css

https://github.com/twlikol/GridViewScroll

Basta con agregar el archivo en forma de script

<script type="text/javascript" src="JavaScript/gridviewScroll.min.js">        </script>

Llamas la función y modificas los parámetros , ancho , cuantas filas se van a congelar , etc etc esto ultimo esta en la documentación

<script type="text/javascript">
        $(document).ready(function () {
            gridviewScroll();
        });

        function gridviewScroll() {
            gridView1 = $('#GridView11').gridviewScroll({                               
                width: "100%",
                height: 700,
                freezesize: 0,
                 headerrowcount: 1
              });
    }

</script> 

creas un estilo en tu archivo css o en la misma pagina

.GridviewScrollHeader TH, .GridviewScrollHeader TD 
{ 
    padding: 3px;
    white-space: nowrap; 
    border-right: 1px solid #AAAAAA; 
    border-bottom: 1px solid #AAAAAA; 
   vertical-align: middle;
    background-color:#03579D;
    color:#FFF;
    font-size:20px;
} 
.GridviewScrollItem TD 
{ 
    padding: 3px; 
    white-space: nowrap; 
    border-right: 1px solid #AAAAAA; 
    border-bottom: 0.7px solid #AAAAAA;
    font-size:20px;

} 
.GridviewScrollPager  
{ 
    border-top: 1px solid #AAAAAA; 
    background-color: #FFFFFF; 
} 
.GridviewScrollPager TD 
{ 
    padding-top: 3px; 
    font-size: 14px; 
    padding-left: 5px; 
    padding-right: 5px; 
} 
.GridviewScrollPager A 
{ 
    color: #666666; 
}.GridviewScrollPager SPAN
{
    font-size: 16px;
    font-weight: bold;
}

.container {
background-color: #03579D;
  height: auto;
  margin-top:0;
  line-height: 60px;
  width: 100%;
  display: inline-block;
  border-radius: 15px;
}

.container2 {
background-color: #03579D;
 height: auto;
  margin-top:0;
  width: 100%;
  display: inline-block;
  border-radius: 15px;
}

.GridviewScrollHeader2 TH, .GridviewScrollHeader TD 
{ 
    padding: 3px;
    white-space: nowrap; 
    border-right: 1px solid #AAAAAA; 
    border-bottom: 1px solid #AAAAAA; 
    vertical-align: middle;
    background-color:#03579D;
    color:#FFF;
    font-size:14px;
} 
.GridviewScrollItem2 TD 
 { 
    padding: 3px; 
    white-space: nowrap; 
    border-right: 1px solid #AAAAAA; 
   border-bottom: 0.7px solid #AAAAAA;
    font-size:14px;

} 

Y simplemente agregas el estilo a la tabla que quieres utilizar , y le colocas el id

<table bgcolor="#FFFFFF" width="100%"  align="center" cellspacing="0"     id="GridView11" style="border-collapse:collapse">

Para encabezado

<tr  class="GridviewScrollHeader">

Para el resto de las filas

<tr class="GridviewScrollItem"     bgcolor="#DBEAF5">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.