2

Quiero lograr que mi tabla HTML tenga un Header Fijo, pero hay un problema y es que tiene un scroll tanto en X como en Y... introducir la descripción de la imagen aquí

<table style="overflow: auto;width: 500px;height: 400px;">
<thead>
    <th>ENE</th>
    <th>FEB</th>
    <th>MAR</th>
    <th>ABR</th>
    <th>MAY</th>
    <th>JUN</th>
    <th>JUL</th>
    <th>AGO</th>
    <th>SEP</th>
    <th>OCT</th>
    <th>NOV</th>
    <th>DIC</th>
</thead>
<tbody>
    <tr>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
    </tr>
    <tr>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
    </tr>
    <tr>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
    </tr>
    <tr>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
    </tr>
    <tr>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
        <td>Contenido</td>
    </tr>
</tbody>

es una tabla básica hecha solo con html y css pero necesitaría que cuando haga scroll tanto X como Y entonces este pueda quedar fijo en Y pero se mueva normalmente en X

Ya allí un ejemplo de una tabla. Lo que necesito es dejar el head fijo para que pese a que haga scroll en Y este se mantenga arriba, y si hace scrool en X entonces este muestre los demás meses.

Ojo utilizo un scroll en X debido a que no cabe completamente la tabla

He tratado ya con posicion absolute y fixed pero cuando hago esto se distorciona un poco la tabla y si hago scrool en X entonces queda estatico arriba osea quedan todos los meses pegados el uno del otro

4
  • ¿Podrías agregar tu código que lleves al momento?
    – user128299
    Commented el 13 abr. 2020 a las 19:28
  • Es dificil porque todo esta generado mediante for en PHP, pero es una tabla básica imagina que es una etiqueta Table otra Thead con los th y un Tbody con los tr es todo Commented el 13 abr. 2020 a las 19:33
  • Entiendo pero como sabes es importAnte agregues lo que lleves, puedes incluir el código de una tabla estática
    – user128299
    Commented el 13 abr. 2020 a las 19:34
  • Listo aunque como te dije una tabla básica Commented el 13 abr. 2020 a las 19:49

1 respuesta 1

0

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>

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.