0

so I have three tables that need to always be aligned. However, they scroll along the X axis and the second table scrolls along the Y axis as well. So I have set the first and third Tables to be floating above the page and they align correctly. However, I cannot for the life of me figure out a way to have one scroll bar at the bottom of the third table that scrolls all three tables.

I have included an image of what the page markup looks like.

Table Image Example

enter image description here

The three divs are withing divs as so

<div class="container">
    <div id="Floating-Jumbotron">
        <div class="box"></div>
        <div class="contains-tables">
           <table>...</table>
        </div>           
    </div>
    <table>....</table>
    <div class="jumbo-2">
        <table> .... </table>
    </div>
    <div class="box"></div>
</div>

So just to clarify my problem here is getting the three tables to scroll at one with only one scroll bar showing.

O.Keary
  • 3
  • 2

1 Answers1

0

Just for reference i have managed to solve this problem now.

I used javascript to edit the left property once each table/div had a position of either fixed or absolute.

To get the scrolling i used this plugin draggabilly https://draggabilly.desandro.com/ with changing the wright property on the "on" event.

    //SCROLL BAR
    var scroller = new Draggabilly( '.scrollBar', {
        axis: 'x',
        containment: true
    });
    scroller.on( 'dragMove', function() {
        console.log((Math.abs(this.position.x)));
        var adjustAmo = ((Math.abs(this.position.x) * -1)/3.5);
        console.log(adjustAmo);
        if(adjustAmo >= -190.429) {
            if(adjustAmo >= -1) {
                $("#tableHeader").css('left', "70px");
                $("#datatable").css('left', "70px");
                $("#summary-row").css('left', "70px");
            } else {
                $("#tableHeader").css('left', adjustAmo + "px");    
                $("#datatable").css('left', adjustAmo + "px");  
                $("#summary-row").css('left', adjustAmo + "px");    
            }
        }
    });

that was my final javascript code. the math is a little bit weird in my opinion but it works so who cares. this obviously has specific lines relevant to me like setting the left to 70px if adjustAmo is larger or equal to -1. the reason this is -1 is because i found sometimes with draggabilly it would sometimes get to -2 which would obscure some content on my table.

Im sure there are better ways to do this but at least this works for me now

O.Keary
  • 3
  • 2