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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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 CSS : Sélectionner tout - Visualiser dans une fenêtre à part
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 ?