datatable jquery: el ancho del encabezado de la tabla no está alineado con el ancho del cuerpo

Solución:

PORQUE

Lo más probable es que su tabla esté oculta inicialmente, lo que evita que jQuery DataTables calcule el ancho de las columnas.

SOLUCIÓN

• Si la tabla está en el elemento plegable, debe ajustar los encabezados cuando el elemento plegable se vuelva visible.

  Por ejemplo, para el complemento Bootstrap Collapse:

  $('#myCollapsible').on('shown.bs.collapse', function () {
     $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust();
  });
  

• Si la tabla está en la pestaña, debe ajustar los encabezados cuando la pestaña se vuelva visible.

  Por ejemplo, para el complemento Bootstrap Tab:

  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
     $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust();
  });
  

El código anterior ajusta el ancho de las columnas para todas las tablas de la página. Ver columns().adjust() Métodos API para obtener más información.

EXTENSIONES DE COLUMNAS FIJAS, DE DESPLAZAMIENTO O RESPONSIVO

Si está usando las extensiones Responsive, Scroller o FixedColumns, necesita usar métodos API adicionales para resolver este problema.

• Si está utilizando la extensión Responsive, debe llamar responsive.recalc() Método API además para columns().adjust() Método API. Consulte Extensión adaptable: ejemplo de puntos de interrupción incorrectos.

• Si está utilizando la extensión Scroller, debe llamar scroller.measure() Método API en lugar de columns().adjust() Método API. Consulte Extensión de desplazamiento: anchos de columna incorrectos o ejemplo de datos faltantes.

• Si está utilizando la extensión FixedColumns, debe llamar fixedColumns().relayout() Método API además para columns().adjust() Método API. Consulte Extensión FixedColumns: ejemplo de anchos de columna incorrectos.

ENLACES

Consulte jQuery DataTables: problemas de ancho de columna con pestañas Bootstrap para obtener soluciones a los problemas más comunes con columnas en jQuery DataTables cuando la tabla está inicialmente oculta.

Resolví este problema envolviendo la tabla “dataTable” con un div con overflow:auto:

.dataTables_scroll
{
    overflow:auto;
}

y agregando este JS después de su dataTable inicialización:

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

No use sScrollX o sScrollY, elimínelos y agregue un div envuélvete tú mismo que hace lo mismo.

Encontré la solución:

Adicional table-layout:fixed a la mesa. Y abrió la aplicación en modo IE.

---

---

Utiliza Nuestro Buscador