0

Tengo este código HTML y CSS y necesito que la cabecera sea fija. Todo funciona bien, pero los títulos no se alinean con el cuerpo.

Este es el código:

<table class="table header_fijo">
    <thead>
        <tr id="cabecera">
            <th>Ticket</th>
            <th><a>SC/RQ/OC</a></th>
            <th>Monto</th>
            <th>Proveedor</th>
            <th>Responsable</th>
            <th>Estado Solicitud</th>
            <th>Categoría</th>
            <th>Sitios</th>
            <th>Descripción</th>
            <th>Estado</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody *ngIf="compras.length != 0">
        <tr id="cabecera" *ngFor="let compra of compras | 
             filtercompras: search | paginate: { itemsPerPage: 
             10, currentPage:p}">
            <td>{{compra.codigo_ticket}}</td>
            <td>
                <a href="#">{{compra.numero_sc}}/</a>
                <a>{{compra.numero_rq}}/</a>
                <a>{{compra.numero_oc}}</a>
            </td>
            <td>{{compra.moneda_descripcion}}
                {{compra.costo | thousandsPipe}}</td>
            <td>{{compra.proveedor_descripcion}}</td>
            <td>{{compra.usuario_nombre}}</td>
            <td>{{compra.estado_descripcion}}</td>
            <td>{{compra.categoria_descripcion}}</td>
            <td>{{compra.sitios_descripcion}}</td>
            <td>{{compra.descripcion}}</td>
            <td class="text-center">
                <span *ngIf="compra.activo==1"  class="badge badge-pill badge-success">Activo</span>
                <span *ngIf="compra.activo==0"  class="badge badge-pill badge-danger">Inactivo</span>
            </td>
            <td class="text-center">
                <a href="javascript:void(0)" (click)="editarSolicitud(compra.id)"  data-toggle="tooltip" title="Editar">
                  <i class="material-icons text-warning">mode_edit</i>
                </a>
                <a *ngIf="compra.activo==1" href="javascript:void(0)" (click)="desactivarSolicitudPage(compra.id)" data-toggle="tooltip" title="Deshabilitar">
                  <i class="material-icons  text-danger">lock</i>
                </a>
                <a *ngIf="compra.activo==0" href="javascript:void(0)" (click)="activarSolicitudPage(compra.id)" data-toggle="tooltip" title="Habilitar">
                  <i class="material-icons text-success">lock_open</i>
                </a>
            </td>
        </tr>
    </tbody>
...

Estilos CSS

.header_fijo {
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
}

.header_fijo thead {
   background-color: white;
   color: black;
}

.header_fijo th {
   padding: $table-cell-padding;
}

.header_fijo thead tr {
   display: block;

   //padding: $table-cell-padding;
   border-top: $table-border-width solid $table-border-color;
   border-bottom: (2 * $table-border-width) solid $table- border-color;
}

.header_fijo tbody {
   display: block;
   overflow: auto;
   width: 100%;
   height: 400px;
}

.table {
   width: 100%;
   max-width: 100%;
   margin-bottom: $spacer;
   background-color: $table-bg; // Reset for nesting within 

   parents with `background-color`. th,
   td {
       padding: $table-cell-padding;
       vertical-align: top;
       border-top: $table-border-width solid $table-border- color;

   }

   thead th {
       vertical-align: bottom;
       border-bottom: (2 * $table-border-width) solid $table- border-color;

   }

   tbody+tbody {
       overflow-y: auto;
       border-top: (2 * $table-border-width) solid $table- border-color;
   }

   .table {
       background-color: $body-bg;
   }
}

// // Condensed table w/ half padding //

.table-sm {

   th,
   td {
       padding: $table-cell-padding-sm;
   }
}


#cabecera th,
td {
   font-size: 80%;
   text-align: center;
}

// Bordered version
//
// Add borders all around the table and between all the 
columns. .table-bordered {
   border: $table-border-width solid $table-border-color;

   th,
   td {
       border: $table-border-width solid $table-border-color;
   }

   thead {

       th,
       td {
           border-bottom-width: (2 * $table-border-width);
       }
   }
}


// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent 
backgrounds) .table-striped {
   tbody tr:nth-of-type(odd) {
       background-color: $table-accent-bg;
   }
}

// Hover effect
//
// Placed here since it has to come after the potential zebra striping

.table-hover {
   tbody tr {
       @include hover {
           background-color: $table-hover-bg;
       }
   }
}

// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and 
prevent // inheritance to nested tables.

@each $color,
$value in $theme-colors {
   @include table-row-variant($color,
   theme-color-level($color, -9));
}

@include table-row-variant(active,
$table-active-bg);


// Dark styles
//
// Same table markup, but inverted color scheme: dark 
background and light text. // stylelint-disable-next-line no-duplicate-selectors

.table {
   .thead-dark {
       th {
           color: $table-dark-color;
           background-color: $table-dark-bg;
           border-color: $table-dark-border-color;
       }
   }

   .thead-light {
       th {
           color: $table-head-color;
           background-color: $table-head-bg;
           border-color: $table-border-color;
       }
   }
}

.table-dark {
   color: $table-dark-color;
   background-color: $table-dark-bg;

   th,
   td,
   thead th {
       border-color: $table-dark-border-color;
   }

   &.table-bordered {
       border: 0;
   }

   &.table-striped {
       tbody tr:nth-of-type(odd) {
           background-color: $table-dark-accent-bg;
       }
   }

   &.table-hover {
       tbody tr {
           @include hover {
               background-color: $table-dark-hover-bg;
           }
       }
   }
}


// Responsive tables
//
// Generate series of `.table-responsive-*` classes for 
configuring the screen // size of where your table will overflow.

.navbar {
   height: 50px;
   padding: 0 15px;
   width: 100%;
   position: fixed;
   top: 0;
   z-index: 1;
}

table.responsive-table th {
   background: #eee;
}

table.responsive-table td {
   line-height: 2em;
}

.table-responsive {
   @each $breakpoint in map-keys($grid-breakpoints) {
       $next: breakpoint-next($breakpoint, $grid-breakpoints);
       $infix: breakpoint-infix($next, $grid-breakpoints);

       &#{$infix} {
           [ ![introducir la descripción de la imagen aquí][1]][1] @include media-breakpoint-down($breakpoint) {
               display: block;
               width: 100%;
               overflow-x: auto;
               overflow-y: auto;
               -webkit-overflow-scrolling: touch;
               -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057

               // Prevent double border on horizontal scroll due to use of `display: block;`
               >.table-bordered {
                   border: 0;
               }
           }
       }
   }
}

Resultado:

introducir la descripción de la imagen aquí

5
  • No entiendo a qué te refieres con "cabecera fija"... quieres que la columna sea de un ancho específico? o quieres que esté siempre visible? Commented el 1 ago. 2018 a las 18:05
  • Bienvenido a StackOverflow! Por favor crea un ejemplo mínimo verificable donde podamos reproducir el problema. Commented el 1 ago. 2018 a las 18:18
  • Hola Hugo lo que necesito es que los títulos se mantengan mientras desplazo la barra hacia abajo o hacia arriba a eso me refiero con cabecera fija, pero eso si funciona el problema es que cuando lo implemente los títulos se corrieron hacia la izquierda y no se alinean con el cuerpo. Commented el 1 ago. 2018 a las 19:22
  • ¿Puedes subir una imagen de como queda? Es que al poner Cabecera Fija y abajo decir que los títulos no se alinean me has liado con lo que quieres.
    – Manuee
    Commented el 2 ago. 2018 a las 11:57
  • los encabezados nos se alinean con el cuerpo comparto la imagen Commented el 2 ago. 2018 a las 16:17

2 respuestas 2

1

Pon position:fixed en la clase cabecera-fija. Esto sirve para que se quede fija y al bajar con el ratón no se mueva.

Referencia sobre el atributo position de css

0

Prueba a poner como style para la cabecera position:fixed; un width y height en función de como quieres que se ajuste la cabecera a la página.

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.