Scroll to the center of a table Horizontally using Javascript-CodePudding

I have a table with more than 9 rows and each row is having columns double than the previous row and i want to scroll to the center of the table on page load.

What I have tried so far:

$(document).ready(function(){
    var outerContent = $('table');
    var innerContent = $('tbody');

    outerContent.scrollLeft((innerContent.width() - outerContent.width()) / 2);        
});

but it doesn't work!

CodePudding user response：

Try putting the table inside of a div with the overflow:scroll; style. Then use scrollLeft on the div rather than the table.

let div = $('div');
div.scrollLeft($('table').width() / 2);

Here is an example.