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

3 minutos de lectura

datatable jquery el ancho del encabezado de la tabla no
Kishore

Estoy usando tablas de datos jQuery. Al ejecutar la aplicación, el ancho del encabezado no está alineado con el ancho del cuerpo. Pero cuando hago clic en el encabezado, se alinea con el ancho del cuerpo, pero incluso entonces hay una ligera desalineación. Este problema ocurre solo en IE.

JSFiddle

Así es como se ve cuando se carga la página:

ingrese la descripción de la imagen aquí

Después de hacer clic en el encabezado:

ingrese la descripción de la imagen aquí

Mi código de tabla de datos:

$("#rates").dataTable({
    "bPaginate": false,
    "sScrollY": "250px",
    "bAutoWidth": false,
    "bScrollCollapse": true,
    "bLengthChange": false,
    "bFilter": false,
    "sDom": '<"top">rt<"bottom"flp><"clear">',
    "aoColumns": [{
            "bSortable": false
        },
        null,
        null,
        null,
        null
    ]
});

rates es mi id de mesa.
¿Podría alguien ayudarme con esto? Gracias por adelantado.

  • ¿Podría crear un jsFiddle para que podamos ver y probar el problema? jsfiddle.net

    – CFS

    21 jun.


  • No puedo crear un jsfiddle. Hay algunas dependencias de DB en mi código.

    – kishore

    21 jun.

  • ¿Podrías simular la tabla con datos locales? usando el parámetro aaData?

    – CFS

    21 jun.

  • Es por eso que he adjuntado la captura de pantalla para que puedas adivinar dónde está fallando.

    – kishore

    21 jun.

  • cfs: ¿Puedes adivinar a partir de la captura de pantalla? También he agregado el código de la tabla de datos.

    – kishore

    21 jun.

1644282067 381 datatable jquery el ancho del encabezado de la tabla no
Sharjeel Ahmed

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 usar sScrollX o sScrollYelimínelos y agregue un div envoltorio usted mismo que hace lo mismo.

  • debe agregar también position:relative; de ​​lo contrario, las etiquetas en el encabezado permanecerán fijas sin seguir el desplazamiento del contenedor.

    – alexroat

    02 ene.

  • He probado más de 10 consejos de solución, pero ninguno de ellos me ayudó, excepto este. ¡Gracias!

    – Fatikán Gasimov

    15 feb. 19 a las 12:35


  • Simplemente deshabilito sScrollX, sScrollY, luego funciona

    – Larry Cai

    17 abr.

  • @LarryCai salvó el día. Intenté tantas cosas y sugerencias y todo lo que tenía que hacer era comentar con pergaminos. Gracias.

    – NoBullMan

    17 oct.

  • Muchas gracias…

    – Matías Gallegos

    14 dic. 21 en 19:38

  • ¿Quiere decir agregar opción o agregar un nombre para la clase attr?

    – Liao San Kai

    08 ago. 14 en 07:57

  • @JaxSwagger: solo publique un mensaje que diga: “Esta página usa un complemento roto que solo funciona en IE” lmao

    – Cristina

    14 jul.

  • ¡Me alegraste el día, muchas gracias! Y @Shaggy, solo agregue una detección de navegador;)

    – Ritoon

    19 ago. 19 a las 15:45


Lo arreglé, Trabaja para mí.

var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

O

var table = $('#example').DataTable();
table.columns.adjust().draw();

Referencia: https://datatables.net/reference/api/columns.adjust()

  • ¿Qué tipo de elemento es “contenedor”?

    –Spencer Sullivan

    17 jul. 19 en 16:10

1644282068 107 datatable jquery el ancho del encabezado de la tabla no
hamza khan

Usa estos comandos

$('#rates').DataTable({
        "scrollX": true,
        "sScrollXInner": "100%",
    });

  • ¿Qué tipo de elemento es “contenedor”?

    –Spencer Sullivan

    17 jul. 19 en 16:10

1644282068 326 datatable jquery el ancho del encabezado de la tabla no
Federico Widerberg

el problema es que se llama a la tabla de datos antes de que la tabla de datos se dibuje en DOM, use el tiempo de espera establecido antes de llamar a la tabla de datos.

setTimeout(function(){ 
    var table = $('#exampleSummary').removeAttr('width').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        columnDefs: [
            { width: 200, targets: 0 }
        ],
        fixedColumns: false
    } );
}, 100);

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad