Tables are traveling down

I was asked to create a gigantic table and for some reasons (SQL, format, etc.) I had to create a table for each column and put them together to make them look like a big table, now I have occupied the whole width of the page and my tables are passed to the bottom part instead of showing a scroll bar at the bottom; How can I keep my tables showing up together? On the other hand I read that a table can be made responsive but a bar appears to move around the table and I want to be able to move the whole page. First of all, Thanks.

PS: I only used aling= left in all the tables so that they would come out together

I'm something new to program in html + php I have something similar to this but repeated a lot of times

'<table width="50" align="left">
<th colspan="2">Piso</th>
<?php
# connect to a DSN "mydb" with a user and password 
$connect2 = odbc_connect("proyecto", "JP", "0000") or die("Error 
Connect to Database");
$query2 = "SELECT sum (IIF([contactode] = 'PISO',1,0))                 
 FROM datos 
 where vendedor <> 'CASA' and (fecha_reg between #$newDate1# and #$newDate2# 
)  
 GROUP BY datos.vendedor
 ORDER BY datos.vendedor";
 # perform the query2
$result2 = odbc_exec($connect2, $query2);
# fetch the data from the database
$b=0;
while(odbc_fetch_row($result2)){
  $b1 = round ($b1 = odbc_result($result2, 1));
  $piso[$b] = $b1;  
  $b++;  
  $sumatoria_piso += $b1;
}
for($b=0;$b<$zz;$b++){
  $b2 = $piso[$b];   
  @$b4= ($b2 / $sumatoria_piso) *100;  
  $b4 = round($b4,1);  
  $b4 = $b4 . "%";  
  print("<tr><td>$b2</td><td style=color:456789;font-size:82%;>$b4</td>
</tr>");
}
@$porciento_piso = ($sumatoria_piso / $sumatoria_piso) * 100;
$porciento_piso = round ($porciento_piso);
$porciento_piso.= "%";
print("<td> $sumatoria_piso</td><td style=color:456789;font-size:82%;> 
$porciento_piso</td>");
# close the connection

odbc_close($connect2);
$sumatoria = 0;
?>
</table>'

Then I'll ask for help to create a function for connections and use PDO connection but that's another issue; sorry for the bad indentation but I did not copy it as I have my code, what is in header I think it's CSS 1.0 because I'm not using another file but it's in it, is this :

     <style>
     table, td, th {    
     border: 1px solid #ddd;
    text-align: right;
    font-size: 95%;
}

table {
    border-collapse: collapse;    
}

th {
    background-color: #7fbfdf;
    padding: 10px;  
}
td {
    padding: 3px;
}
tr:nth-child(odd){background-color: #e5f2f8}
tr:last-child{background-color: #feff65}
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
}
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
</style>

As you can see in the image, the tables appear in the bottom part and apart from the footer that I made, I want them to continue appearing towards the right
Thanks in advance.