es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Tabla: Estirar el contenido y colocar encabezado y pie de página hasta los bordes.

02 Jun, 2023 Programación

Tengo un componente que tiene una table. La tabla se ve así:

<div>    
  <table>
    <thead>...
    <tbody>...
    <tfoot>...
  </table>
</div>

Para todo mi diseño necesito mostrar aproximadamente 3 filas (en el tbody). Todo lo demás de la tabla debería ir en el medio. Actualmente, se ve así:

enter image description here

Ahora quiero tener la thead fija en la parte superior y la tfoot en la parte inferior. Mis configuraciones actuales se ven así:

table {
  height: calc(100% - 8px);
  width: 100%;
  display: inline-block;
  overflow-y: auto;
}
div{ max-height: 260px;}

Sé que puedo arreglar la tabla con algún tipo de envoltura en un div, y establecer max-height y overflow. Pero, ¿cómo distribuir la table?

Solicitud adicional: ¿Cómo llenar la tabla para cubrir todo el ancho? Actualmente, ¿no se extiende? (ver captura de pantalla) Ajustando el tamaño de:

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para arreglar el encabezado (thead) y pie de página (tfoot) de una tabla, puedes usar la propiedad CSS position: sticky. Asigna el valor 0 a top para thead y 0 a bottom para tfoot. Aquí tienes un ejemplo de código:

    table {
   height: calc(100% - 8px);
   width: 100%;
   display: inline-block;
   overflow-y: auto;
}
div {
   max-height: 260px;
   overflow: hidden; /* para ocultar la barra de desplazamiento del div*/
}

thead, tfoot {
   position: sticky;
   background-color: #fff; /* para hacerlo visible */
}
thead {
   top: 0;
}
tfoot {
   bottom: 0;
}

    Para hacer que la tabla se extienda y cubra todo el ancho, agrega el siguiente CSS:

    table {
   table-layout: fixed;
   width: 100%;
}

    La propiedad table-layout: fixed hará que el navegador asigne el ancho necesario a las columnas en función del contenido de la primer fila, y la propiedad width: 100% hará que la tabla se expanda al ancho de su elemento contenedor.

Comments are closed.