3

tengo una tabla html dentro de un div con scroll en Y, dentro de la tabla tengo un header que quiero que sea fijo, como puedo hacer para que el header de la tabla se quede fijo sabiendo que la tabla esta dentro de un div.

    div.tableContainer {
        width: 90%; /* table width will be 99% of this*/
        height: 320px; /* must be greater than tbody*/
        overflow: auto;
        margin: 0 auto;
    }

    table {
        width: 97%; /*100% of container produces horiz. scroll in Mozilla*/
        border: none;
        border-spacing: 0px;
        background-color: transparent;
    }

        table > tbody {
            overflow: auto;
            height: 280px;
            overflow-x: hidden;
        }

            table > tbody tr {
                height: auto;
            }
<div class="tableContainer">
<table role="table">
    <thead role="rowgroup">
        <tr role="row">
            <th role="columnheader">First Name</th>
            <th role="columnheader">Last Name</th>
            <th role="columnheader">Job Title</th>
            <th role="columnheader">Favorite Color</th>
            <th role="columnheader">Wars or Trek?</th>
            <th role="columnheader">Secret Alias</th>
            <th role="columnheader">Date of Birth</th>
            <th role="columnheader">Dream Vacation City</th>
            <th role="columnheader">GPA</th>
            <th role="columnheader">Arbitrary Data</th>
        </tr>
    </thead>
    <tbody role="rowgroup">
        <tr role="row">
            <td role="cell">James</td>
            <td role="cell">Matman</td>
            <td role="cell">Chief Sandwich Eater</td>
            <td role="cell">Lettuce Green</td>
            <td role="cell">Trek</td>
            <td role="cell">Digby Green</td>
            <td role="cell">January 13, 1979</td>
            <td role="cell">Gotham City</td>
            <td role="cell">3.1</td>
            <td role="cell">RBX-12</td>
        </tr>
        <tr role="row">
            <td role="cell">The</td>
            <td role="cell">Tick</td>
            <td role="cell">Crimefighter Sorta</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">John Smith</td>
            <td role="cell">July 19, 1968</td>
            <td role="cell">Athens</td>
            <td role="cell">N/A</td>
            <td role="cell">Edlund, Ben (July 1996).</td>
        </tr>
        <tr role="row">
            <td role="cell">Jokey</td>
            <td role="cell">Smurf</td>
            <td role="cell">Giving Exploding Presents</td>
            <td role="cell">Smurflow</td>
            <td role="cell">Smurf</td>
            <td role="cell">Smurflane Smurfmutt</td>
            <td role="cell">Smurfuary Smurfteenth, 1945</td>
            <td role="cell">New Smurf City</td>
            <td role="cell">4.Smurf</td>
            <td role="cell">One</td>
        </tr>
        <tr role="row">
            <td role="cell">Cindy</td>
            <td role="cell">Beyler</td>
            <td role="cell">Sales Representative</td>
            <td role="cell">Red</td>
            <td role="cell">Wars</td>
            <td role="cell">Lori Quivey</td>
            <td role="cell">July 5, 1956</td>
            <td role="cell">Paris</td>
            <td role="cell">3.4</td>
            <td role="cell">3451</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
    </tbody>
</table>

</div>

2 respuestas 2

2

Te sugiero revisar estas dos respuestas:

Básicamente la única forma de lograrlo es desarmando los estilos por defectos de la tabla y volverlos "tipo bloque". Hay una serie de características que tienes que tener en cuenta en soluciones sin js y una de ellas, es el tamaño en ancho que vincula a las celdas de una misma columna porque debes setearlas manualmente en css.

Ejemplo

  • En el **html**, solo colócale la clase header-sticky o como la llames.
  • Y en el **css**, añade los siguientes estilos:

.header-fixed{
  display: block;
  position: relative;
  height: 300px; /*la que necesites*/ 
  max-height: 80vh; /*la que necesites*/
  overflow: auto;
}

.header-fixed thead,
.header-fixed tbody{
  display: block;
}

.header-fixed thead{
  position: sticky;
  display: inline-block;
  top: 0;
}

.header-fixed tr{
  display: flex;
}

.header-fixed th,
.header-fixed td{
  min-width: 150px; /*La que necesites*/
  max-width: 150px; /*La que necesites*/
  padding: 0.5em;
}

Como en este ejemplo:

*{
box-sizing: border-box;
padding: 0;
margin: 0;
}

table {
  width: 90%; /*100% of container produces horiz. scroll in Mozilla*/
  border-spacing: 0px;
  background-color: transparent;
}

.header-fixed{
  display: block;
  position: relative;
  height: 300px;
  max-height: 80vh;
  overflow: auto;
}

.header-fixed thead,
.header-fixed tbody{
  display: block;
}

.header-fixed thead{
  position: sticky;
  display: inline-block;
  top: 0;
  right: 0;
  background-color: white;
  box-shadow: 0 5px 5px 0 rgba(0,0,0,.1)
}

.header-fixed tr{
  display: flex;
  align-items: center;
}

.header-fixed th,
.header-fixed td{
  min-width: 150px;
  max-width: 150px;
  padding: 0.5em;
}

.header-fixed th{
  text-align: left;
}
<table role="table" class="header-fixed">
    <thead role="rowgroup">
        <tr role="row">
            <th role="columnheader">First Name</th>
            <th role="columnheader">Last Name</th>
            <th role="columnheader">Job Title</th>
            <th role="columnheader">Favorite Color</th>
            <th role="columnheader">Wars or Trek?</th>
            <th role="columnheader">Secret Alias</th>
            <th role="columnheader">Date of Birth</th>
            <th role="columnheader">Dream Vacation City</th>
            <th role="columnheader">GPA</th>
            <th role="columnheader">Arbitrary Data</th>
        </tr>
    </thead>
    <tbody role="rowgroup">
        <tr role="row">
            <td role="cell">James</td>
            <td role="cell">Matman</td>
            <td role="cell">Chief Sandwich Eater</td>
            <td role="cell">Lettuce Green</td>
            <td role="cell">Trek</td>
            <td role="cell">Digby Green</td>
            <td role="cell">January 13, 1979</td>
            <td role="cell">Gotham City</td>
            <td role="cell">3.1</td>
            <td role="cell">RBX-12</td>
        </tr>
        <tr role="row">
            <td role="cell">The</td>
            <td role="cell">Tick</td>
            <td role="cell">Crimefighter Sorta</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">John Smith</td>
            <td role="cell">July 19, 1968</td>
            <td role="cell">Athens</td>
            <td role="cell">N/A</td>
            <td role="cell">Edlund, Ben (July 1996).</td>
        </tr>
        <tr role="row">
            <td role="cell">Jokey</td>
            <td role="cell">Smurf</td>
            <td role="cell">Giving Exploding Presents</td>
            <td role="cell">Smurflow</td>
            <td role="cell">Smurf</td>
            <td role="cell">Smurflane Smurfmutt</td>
            <td role="cell">Smurfuary Smurfteenth, 1945</td>
            <td role="cell">New Smurf City</td>
            <td role="cell">4.Smurf</td>
            <td role="cell">One</td>
        </tr>
        <tr role="row">
            <td role="cell">Cindy</td>
            <td role="cell">Beyler</td>
            <td role="cell">Sales Representative</td>
            <td role="cell">Red</td>
            <td role="cell">Wars</td>
            <td role="cell">Lori Quivey</td>
            <td role="cell">July 5, 1956</td>
            <td role="cell">Paris</td>
            <td role="cell">3.4</td>
            <td role="cell">3451</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
    </tbody>
</table>

2

te voy a dejar una opción

.fixedhead{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.fixedbody{
    display: block;
    height: 7rem;
    overflow: auto;
    position: static;
}
<div class="tableContainer">
<table role="table">
    <thead class="fixedhead" role="rowgroup">
        <tr role="row">
            <th role="columnheader">First Name</th>
            <th role="columnheader">Last Name</th>
            <th role="columnheader">Job Title</th>
            <th role="columnheader">Favorite Color</th>
            <th role="columnheader">Wars or Trek?</th>
            <th role="columnheader">Secret Alias</th>
            <th role="columnheader">Date of Birth</th>
            <th role="columnheader">Dream Vacation City</th>
            <th role="columnheader">GPA</th>
            <th role="columnheader">Arbitrary Data</th>
        </tr>
    </thead>
    <tbody class="fixedbody" role="rowgroup">
        <tr role="row">
            <td role="cell">James</td>
            <td role="cell">Matman</td>
            <td role="cell">Chief Sandwich Eater</td>
            <td role="cell">Lettuce Green</td>
            <td role="cell">Trek</td>
            <td role="cell">Digby Green</td>
            <td role="cell">January 13, 1979</td>
            <td role="cell">Gotham City</td>
            <td role="cell">3.1</td>
            <td role="cell">RBX-12</td>
        </tr>
        <tr role="row">
            <td role="cell">The</td>
            <td role="cell">Tick</td>
            <td role="cell">Crimefighter Sorta</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">John Smith</td>
            <td role="cell">July 19, 1968</td>
            <td role="cell">Athens</td>
            <td role="cell">N/A</td>
            <td role="cell">Edlund, Ben (July 1996).</td>
        </tr>
        <tr role="row">
            <td role="cell">Jokey</td>
            <td role="cell">Smurf</td>
            <td role="cell">Giving Exploding Presents</td>
            <td role="cell">Smurflow</td>
            <td role="cell">Smurf</td>
            <td role="cell">Smurflane Smurfmutt</td>
            <td role="cell">Smurfuary Smurfteenth, 1945</td>
            <td role="cell">New Smurf City</td>
            <td role="cell">4.Smurf</td>
            <td role="cell">One</td>
        </tr>
        <tr role="row">
            <td role="cell">Cindy</td>
            <td role="cell">Beyler</td>
            <td role="cell">Sales Representative</td>
            <td role="cell">Red</td>
            <td role="cell">Wars</td>
            <td role="cell">Lori Quivey</td>
            <td role="cell">July 5, 1956</td>
            <td role="cell">Paris</td>
            <td role="cell">3.4</td>
            <td role="cell">3451</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
        <tr role="row">
            <td role="cell">Captain</td>
            <td role="cell">Cool</td>
            <td role="cell">Tree Crusher</td>
            <td role="cell">Blue</td>
            <td role="cell">Wars</td>
            <td role="cell">Steve 42nd</td>
            <td role="cell">December 13, 1982</td>
            <td role="cell">Las Vegas</td>
            <td role="cell">1.9</td>
            <td role="cell">Under the couch</td>
        </tr>
    </tbody>
</table>
</div>

esta es la opcion mas facil pero tiene grandes desventajas; otra seria por javascript muy compleja y de pronto se pueda hacer una con flexbox pero creeme que ya no seria una tabla de html seria una personalizacion

4
  • las celdas del body se movieron tendria que ajustarlas con un style en cada celda?
    – Ivxn
    Commented el 29 ago. 2018 a las 16:50
  • se mueven por la barra de desplazamiento que aparece, podrias utilizar un margin-right para sacarla
    – junior
    Commented el 29 ago. 2018 a las 16:54
  • @Ivxn como te digo tiene sus desventajas
    – junior
    Commented el 29 ago. 2018 a las 16:55
  • o .fixedbody::-webkit-scrollbar { display: none; } o .fixedbody::-webkit-scrollbar-track{ width: 6px; background-color: #F5F5F5;}
    – junior
    Commented el 29 ago. 2018 a las 17:01

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.