Create table with fixed header and generate a vertical scroll

Question

Create table with fixed header and generate a vertical scroll

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'm working on a table from HTML and CSS, what I need is to generate a table whose content inside the thead tags is static which is obviously the header of a table, and the content within tbody will generate a vertical scroll. And I have the following code but I could not generate that functionality, if someone could help me.

HTML code:

<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>

CSS Code:

#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;
}

I've updated the code a bit

html5 css

asked by José MN 19.06.2017 в 18:04

source

2 answers

Using Object.assign for a multi-level javascript object Redirects when going from HTTP to HTTPS

score 1 · Answer 1

Simplify. You have a lot of code that does not do anything. Start with this css , just write this code, and then you see adding what you need to fit your design. I have added a new class ( header_fijo ) to the table respecting your id's and it works for me:

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

And the 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;
}

score 0 · Answer 2

I use exactly this GitHub development, it is documented and explained

It lets you freeze rows in the header and left to work as if it were excel, obvious with a dynamic data source, sql, notepad, plain text etc etc, it works with javascript and html and the code is very clean and allows you to edit the css

link

Simply add the file as a script

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

You call the function and modify the parameters, width, how many rows are going to be frozen, etc. etc this is in the documentation

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

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

</script>

you create a style in your css file or on the same page

.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;

}

And you simply add the style to the table you want to use, and you put the id

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

For heading

<tr  class="GridviewScrollHeader">

For the rest of the rows

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