Skip to main content
Se mejora formato de código y se elimina texto irrelevante al mismo
Origen Enlace
user128299
user128299

Si continuamos usando html y css, sin recurrir a javascript ni librerías adicionales, para fijar la cabecera de una tabla html, quizás lo más sencillo sea aplicar un "position" adecuado (fixed o sticky) a la cabecera mediante css, como se ilustra en el siguiente ejemplo:

<!-- Ejemplo cabecera de tabla html fija usando position de CSS -->
<style>
#cabecera {
  padding: .5em .5em .5em 0em;
}
td {
  background-color: #eee;
  overflow: hidden;
  white-space: nowrap;
}
th {
  background-color: #222;
  color: white;
  padding: 2px;
  position: -webkit-sticky;
  position: sticky;
  top: 2px;
}
</style>

<div id="cabecera">Cabecera</div>
<table>
  <thead>
    <tr><th>Título 1</th><th>Título 2</th><th>Título 3</th></tr>
  </thead>
  <tbody>
    <tr><td>Contenido 1 - 0123456789</td><td>Contenido 2 - 0123456789</td><td>Contenido 3 - 0123456789</td></tr>
    <!-- ... Replicar líneas para ver efecto ... -->
  </tbody>
</table>

Saludos.

<!-- Ejemplo cabecera de tabla html fija usando position de CSS -->
<style>
#cabecera {
  padding: .5em .5em .5em 0em;
}
td {
  background-color: #eee;
  overflow: hidden;
  white-space: nowrap;
}
th {
  background-color: #222;
  color: white;
  padding: 2px;
  position: -webkit-sticky;
  position: sticky;
  top: 2px;
}
</style>

<div id="cabecera">Cabecera</div>
<table>
  <thead>
    <tr><th>Título 1</th><th>Título 2</th><th>Título 3</th></tr>
  </thead>
  <tbody>
    <tr><td>Contenido 1 - 0123456789</td><td>Contenido 2 - 0123456789</td><td>Contenido 3 - 0123456789</td></tr>
    <!-- ... Replicar líneas para ver efecto ... -->
  </tbody>
</table>

Si continuamos usando html y css, sin recurrir a javascript ni librerías adicionales, para fijar la cabecera de una tabla html, quizás lo más sencillo sea aplicar un "position" adecuado (fixed o sticky) a la cabecera mediante css, como se ilustra en el siguiente ejemplo:

<!-- Ejemplo cabecera de tabla html fija usando position de CSS -->
<style>
#cabecera {
  padding: .5em .5em .5em 0em;
}
td {
  background-color: #eee;
  overflow: hidden;
  white-space: nowrap;
}
th {
  background-color: #222;
  color: white;
  padding: 2px;
  position: -webkit-sticky;
  position: sticky;
  top: 2px;
}
</style>

<div id="cabecera">Cabecera</div>
<table>
  <thead>
    <tr><th>Título 1</th><th>Título 2</th><th>Título 3</th></tr>
  </thead>
  <tbody>
    <tr><td>Contenido 1 - 0123456789</td><td>Contenido 2 - 0123456789</td><td>Contenido 3 - 0123456789</td></tr>
    <!-- ... Replicar líneas para ver efecto ... -->
  </tbody>
</table>

Saludos.

Si continuamos usando html y css, sin recurrir a javascript ni librerías adicionales, para fijar la cabecera de una tabla html, quizás lo más sencillo sea aplicar un "position" adecuado (fixed o sticky) a la cabecera mediante css, como se ilustra en el siguiente ejemplo:

<!-- Ejemplo cabecera de tabla html fija usando position de CSS -->
<style>
#cabecera {
  padding: .5em .5em .5em 0em;
}
td {
  background-color: #eee;
  overflow: hidden;
  white-space: nowrap;
}
th {
  background-color: #222;
  color: white;
  padding: 2px;
  position: -webkit-sticky;
  position: sticky;
  top: 2px;
}
</style>

<div id="cabecera">Cabecera</div>
<table>
  <thead>
    <tr><th>Título 1</th><th>Título 2</th><th>Título 3</th></tr>
  </thead>
  <tbody>
    <tr><td>Contenido 1 - 0123456789</td><td>Contenido 2 - 0123456789</td><td>Contenido 3 - 0123456789</td></tr>
    <!-- ... Replicar líneas para ver efecto ... -->
  </tbody>
</table>
Origen Enlace

Si continuamos usando html y css, sin recurrir a javascript ni librerías adicionales, para fijar la cabecera de una tabla html, quizás lo más sencillo sea aplicar un "position" adecuado (fixed o sticky) a la cabecera mediante css, como se ilustra en el siguiente ejemplo:

<!-- Ejemplo cabecera de tabla html fija usando position de CSS -->
<style>
#cabecera {
  padding: .5em .5em .5em 0em;
}
td {
  background-color: #eee;
  overflow: hidden;
  white-space: nowrap;
}
th {
  background-color: #222;
  color: white;
  padding: 2px;
  position: -webkit-sticky;
  position: sticky;
  top: 2px;
}
</style>

<div id="cabecera">Cabecera</div>
<table>
  <thead>
    <tr><th>Título 1</th><th>Título 2</th><th>Título 3</th></tr>
  </thead>
  <tbody>
    <tr><td>Contenido 1 - 0123456789</td><td>Contenido 2 - 0123456789</td><td>Contenido 3 - 0123456789</td></tr>
    <!-- ... Replicar líneas para ver efecto ... -->
  </tbody>
</table>

Saludos.