Fixed Header is not aligning correctly vertically on scroll in small screens

imc123 · February 2025

Description of problem: Fixed Header is not aligning correctly vertically on scroll in small screens

kthorngren · February 2025

This example seems to work correctly on an iPhone. Make sure you have all the correct JS and CSS files for the style framework being used. Use the Download Builder for this.

If you still need help please provide a link to a test case replicating the issue so it can be debugged.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Huw_Pearce · March 2025

Hi Kevin,

I have something that seems the same issue.

This is my web page https://sailwave.com/results/huw/Sailwave-DataTables-ExperimentV08.htm.

I look forward to any pointers for resolving the issue.

PS - you kindly helped point me in the right direction with other issues on the aforementioned page, which were much appreciated.

Kind regards,
Huw

kthorngren · March 2025

@Huw_Pearce

I copied the relevant parts of your code into this test case so I could experiment.
https://live.datatables.net/rukorose/1/edit

It looks like you have defined colgroup for each table. Datatables also defines colgroup to help handle column widths correctly. I don't know all the details of how this works.

In the test case I removed the colgroup from the first two tables. Scroll through the first two tables and you will see when the fixHeader is applied the header width stays the correct width. However when the FixedHeader is applied to the third table the column width is incorrect. Inspecting the header you will see two colspan elements; The first is created by Datatables and the second is yours with the style attribute added. For example:

<colgroup>
   <col data-dt-column="0" style="width: 74.4688px;">
   <col data-dt-column="1" style="width: 72.8594px;">
   <col data-dt-column="2" style="width: 63.0078px;">
   <col data-dt-column="3" style="width: 64.0469px;">
   <col data-dt-column="4" style="width: 89.4062px;">
   <col data-dt-column="5" style="width: 93.375px;">
   <col data-dt-column="6" style="width: 103.141px;">
   <col data-dt-column="7" style="width: 102.578px;">
   <col data-dt-column="5" style="width: 17px;">
   <col data-dt-column="6" style="width: 17px;">
   <col data-dt-column="7" style="width: 17px;">
</colgroup>

<colgroup span="17">
   <col class="rank" style="width: 17px;">
   <col class="fleet" style="width: 17px;">
   <col class="nat" style="width: 17px;">
   <col class="sailno" style="width: 17px;">
   <col class="boat" style="width: 17px;">
   <col class="division" style="width: 17px;">
   <col class="helmname">
   <col class="crewname">
   <col class="race">
   <col class="race">
   <col class="race">
   <col class="race">
   <col class="race">
   <col class="carriedfwd">
   <col class="penalties">
   <col class="total">
   <col class="nett">
   <col data-dt-column="5" style="width: 93.375px;">
   <col data-dt-column="6" style="width: 120.852px;">
   <col data-dt-column="7" style="width: 106.961px;">
</colgroup>

It seems these are conflicting. I'm not sure if you are using colgroup for anything in your solution. If not removing them might resolve the issue. @allan will need to look to debug further.

Kevin

Huw_Pearce · March 2025

Hi Kevin,
Thank you for your prompt answer and pointer to where there is conflict in my code.

I will go and look at my code with your insight.

Thank you very much.

Kind regards,
Huw

kthorngren · March 2025

@Huw_Pearce I forgot to mention a couple other issues I found. First is you have the same id for each table: id="summarytable. The id attribute is expected to be unique on the page. One option is to add a digit to each id to make them unique, for example: id="summarytable1.

Second is this statement on line 42 is missing a close quote after .css:

<link href="https://cdn.datatables.net/plug-ins/2.1.8/features/orderNumbers/dist/dataTables.orderNumbers.min.css rel="stylesheet">

That CSS is not being loaded. It should look like this:

<link href="https://cdn.datatables.net/plug-ins/2.1.8/features/orderNumbers/dist/dataTables.orderNumbers.min.css" rel="stylesheet">

Kevin

Huw_Pearce · March 2025

Hi Kevin,
Apologies for not responding sooner.
Thank you for the feedback, much it is much appreciated.

Question - if each table has a unique id, how does DataTables work on tables that I want sorting and responsive actions to work on? Do I have to create the code for each unique table id?

Kind regards,
Huw

kthorngren · March 2025

Datatables creates an API instance for each table. They operate independently. You can use the tables() API to select the appropriate table if you need to use the API.

Kevin

mic97 · March 2025

Hi Kevin,

still working incorrectly.

allan · March 2025

I don't appear to have a problem with it here:

What browser and OS are you using? And what is the width of the view port for the "Output" in your screenshot?

Is it Kevin's test case you are using for that screenshot, or something else? The headers appear different?

Allan

kthorngren · March 2025

Use my test case:
https://live.datatables.net/rukorose/1/edit

I removed the added colgroup from the first and second table but left it on the third. Thought that resolved the issue but when scrolling past the header of the second table it becomes unaligned:

Scroll past that to the third table with defined colgroup and its worse.

This is on a Mac with Chrome Version 134.0.6998.89 (Official Build) (arm64). I think you need to have a small container to see the issue.

Kevin

allan · March 2025

I see it now - many thanks for the clarification Kevin. It looks like the last table is struggling as well. I'll take a dig into it.

Allan

mic97 · June 2025

@allan, this still working incorrectly, Please resolve this issue

allan · June 2025

It is still in my to do list - I've just been working on other things. I'll look at it as soon as I can and post back here when I've got an update. If you need it to be prioritised, there are support packages available.

Allan

AntonioAR · January 9

Hola, quería saber si esto ya está solucionado. Actualmente estoy trabajando en un proyecto y las columnas no coinciden con los encabezados de la tabla. Tengo habilitadas las extensiones FixedHeader y Responsive, y estoy utilizando las últimas versiones de DataTables y sus extensiones.

allan · January 9

@AntonioAR - Could you post a link to your page showing the issue, so I can debug that directly please?

Allan

AntonioAR · January 13

Hola, gracias por responder.
No puedo mostrar el proyecto ya que es interno de la empresa y, por motivos de privacidad, no me es posible compartirlo.

El problema que tengo es exactamente el mismo que el del usuario imc123, tal como se muestra en la siguiente imagen:

Cuando se carga la página, la tabla se muestra correctamente. Sin embargo, al hacer scroll y activarse FixedHeader, las columnas del encabezado cambian de anchura y no coinciden con las columnas del cuerpo de la tabla. Esto provoca una desalineación entre el <thead> y el <tbody>, generando problemas visuales y de usabilidad.

allan · January 16

Apologies - I haven't had a chance to look into it this week. I hope to do so on Monday.

Allan

AntonioAR · January 18

@allan gracias

allan · January 19

I've managed to identify the problem. The issue was that FixedHeader wasn't taking into account the columns hidden by Responsive. What it was doing was making a call to DataTables' .columns(':visible') to get the visible columns. But that allow for Responsive hidden columns. My feeling is that it should, so I've made a modification to both Responsive and DataTables core to allow for this.

The nightly builds of each have this fix now, and with them, the example works correctly.

If someone else could try it and confirm the fix works, that would be appreciated. Assuming all is good, I'll drop a release for both of them.

Allan

AntonioAR · January 20

Hola @allan, sigue funcionando con problemas. Te adjunto el enlace del nuevo test que he hecho; he modificado algunas cosas, pero el problema persiste.

Para reproducirlo, tienes que entrar en este test, cambiar la longitud de página de 10 a 100 y luego hacer scroll hacia abajo. Verás que sigue desalineado, igual que antes.

Imagen:

enlace : https://live.datatables.net/lubobiri/1/edit

allan · January 20

The issue there is that the cached positions of the tables on the page are not refreshed when the table is redraw. I've committed a change to address this and the nightly for FixedHeader now has this fix. The example is now working well.

Allan

AntonioAR · January 21

Hola @allan, el problema sigue sin resolverse. Al añadir más columnas a las tablas, se puede observar que el desalineamiento persiste, incluso en el ejemplo de referencia que compartiste.

allan · January 21

The problem I'm seeing actually, is that Responsive isn't working so well when resizing the view output.

Can you give me step by step instructions on how to see the misalignment with the latest example? It seems to work for me in that regard.

Allan

AntonioAR · January 21

Hola, aquí te dejo el enlace del test para reproducir el fallo.
Al igual que antes, basta con cambiar la longitud de la tabla de 10 a 100 y hacer scroll hacia abajo.
También se puede observar el problema al cambiar el tamaño de la ventana.

https://live.datatables.net/yequgata/1/edit

Fixed Header is not aligning correctly vertically on scroll in small screens

Fixed Header is not aligning correctly vertically on scroll in small screens

Answers

Howdy, Stranger!

Categories

DataTables

Fixed Header is not aligning correctly vertically on scroll in small screens

Fixed Header is not aligning correctly vertically on scroll in small screens

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables