Solution 1 :

The flashes are caused by reflow which happens to be more noticeable on devices and smaller screens. The reflows are caused by always redrawing the whole table.

Solutions could be:

  1. Fetch only changed rows from the server and add/remove only affected rows.
  2. Perform a diff between current and last response and add/remove only affected rows.

Do you have the control of the client-side? what exactly is the point of using the library?

Problem :

I have a responsive HTML table, it changes depending on the screen size of the user.
I use Ajax to load the table as the data often changes.
Everything works well when the browser is in fullscreen, however when i make the screen smaller and the tables CSS changes to the responsive mode, or i view the table on a mobile device, everytime ajax loads the table again, the fullscreen table breifly flashes before displaying the responsive table

I am using the following script for the responsive table:

The code i am using is as follows:

function table() {
        url: 'mytable.php',
        type: 'post',
        data: {
            name: '<?php echo $name ?>',
            username: '<?php echo $username ?>'
        success: function(response) {
            $(document).ready(function() {
                    forceResponsive: false



setInterval(table, 3600);
$(document).ready(function() {
        forceResponsive: false


I have tried to re-arrange the code to make ‘basictable’ load first, as i think this could fix it. however it does not seem to work.

How can i fix this?


Comment posted by Jonny P

Please can you elaborate on what you mean by ‘ what is the point of using the library’ i am using it because it contains the code that provides the responsive table, am i misunderstanding?

Comment posted by Eriks Klotins

Responsivity can be achieved with html+css as well. If you generate the table yourself you get more control of when and how more data is added.