Table fixed avec scroll

Bonjour,

J'ai un tableau 'left', c'est une colonne située à gauche de la page, qui doit être toujours visible, et un tableau "right" qui est très long, et qui doit être scrollable sur X.

Mon problème est lorsque je scroll mon tableau "right', il vient recouvrir le tableau "left" et "left" disparaît sous le tableau "right". comme si la longueur du tableau "right" était devenue également sa longueur initiale+ longueur du tableau left.

J'ai remarqué ce comportement récemment et avant, je n'avais pas de soucis avec ça. J'ai épuré au maximum mes class, voici le code :

HTML / PHP :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<table border="1" class ="left">
        <tbody>
          <?php
          foreach ( $columnAll as $key => $row )    
          {?>
            <tr class="" >
              <th class="" style="border:none;font-weight:normal;"><?php echo $key; ?></th>         
            </tr><?php
          }?>
        </tbody>
      </table>
 
      <table border="1" id="example_horizontal" class ="right" style="border:none"> 
        <thead>
          <tr><?php
            for ($i = 1; $i <= $nbr_id; $i++)
            {// HERE to change width of the colum ?>
              <th class="" style="border:none; width: 100px;"><?php echo ''; ?></th><?php
            }?>
          </tr>
        </thead>
        <tbody><?php
          // pour chaque ligne (chaque enregistrement)
          foreach ( $columnAll as $key => $row ) 
          { ?>
            <tr style="min-height: 10px;"><?php       
              for ($i = 0; $i < $nbr_id; $i++)
              {
                $classe=isset($row[$i])  ? NULL : 'w3-grey' ;
                // HERE to change width of the colum ?>
                <td class=" <?php echo $classe; ?>"  style="border:none; width: 100px;"><?php echo $row[$i]; ?>             
                </td><?php
              }?>
            </tr><?php
          }?>
        </tbody>
      </table>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.right {
    width: 100px;
    margin-left: 150px;
    word-break: break-all;
    overflow-x: scroll;
    overflow-y: visible;
}
 
.left {
    position: absolute;
    left: 50;
    width: 150px;
    margin-top:64px;
    border:none;
}

La barre de mon scroll pour le tableau de droite apparait sur toute la longueur de la page alors qu'il devrait apparaître uniquement sur la longueur du tableau de droite.
Est-ce que vous pouvez m'aider ? :)

Bonjour,

à voir :

table HTML avec entête fixe - responsive - JS (+choix du nombre de lignes affichées)
table HTML avec entête fixe - scrollable (hauteur imposée) - full CSS

Bonjour,
Citation:
un tableau "right" qui est très long, et qui doit être scrollable sur X.
...
Code:

1 2 3 4 .right { width: 100px; ... }
il n'est visiblement pas si long que cela ... 100px !!

Sans le code HTML généré il va être difficile de t'aider pour reproduire ce phénomène.

Je n'ai jamais trop regardé si cela été faisable en pur CSS de figer une colonne qui doit pouvoir éventuellement scroller en verticale, une solution via du JavaScript me semble inévitable, j'ai même cela dans mes cartons si besoin.