Framework

Maintenir l'overflow-scroll en haut d'une table

Non Résolu

Hey ,

Je cherche a savoir comment faire pour faire en sorte que l'overflow-scroll de ma table commence en haut et non en bas, je ne sais pas s'il faut du javascript ou autres...



Merci à vous

536 vues
13 décembre 2021 à 19:49 (Édité)
Cette pub permet au site de vivre ...

7 commentaires

j'ai beau avoir retirer bootstrap ça marche tjr pas pour le moment j'ai pas trop le temps de chercher surtout que c'est "secondaire".

Bonsoir @Arlequin29,


Nous n'avons pas eu de retour de ta part....

As-tu trouvé la solution pour ton problème ? 🤔

Re @Arlequin29 @Space001,


J'ai jamais été confronté à cela, et Space lien ne va trop l'aider car sur le lien il indique la façon dont l'overflow va agir 🙃

Mais donc du coup, comme c'est Bootstrap, c'est encore différent, car c'est chiant encore une fois à savoir d'où vient le soucis.

On va pas pouvoir tester ton code..


Essaie de placer des balises !important dans les classes qui s'occupe de cet l'overflow, cela évitera que le CSS de Bootstrap prenne le dessus...

Hello @Arlequin29 😁


Ah oui en effet, étrange...

Si tu utilises bootstrap, il y a peut-être une interférence entre ton CSS et le framework 😐

Voici la documentation sur les overflow de bootstrap sur ce lien 😉


En espèrent que ça t'aidera mais c'est vraiment étrange 😅

Voici mon code :


<div id="offers_completed" class="offers_completed offers_completed-hide">
  <div style="display:flex;"><button id="offers" style="margin:20px 10px" class="submit">Offres</button><button id="payments" style="margin:20px 10px" class="submit">Paiements</button></div>
  <table class="white table offers" style="max-width:100%">
    <thead>
      <tr>
        <th>Date</th>
        <th>Nom de l'offre</th>
        <th>Coins</th>
        <th>Plateforme</th>
        <th>Status</th>
      </tr>
    </thead>


    <tbody>
    <?php 
    if($rowTransactions > 0) {
      while($t = $fetchTransactions->fetch()) { 
        echo '<tr>'; 
        echo '<td>'.$t['date'].'</td>';
        echo '<td>'.$t['campaign_name'].'</td>';
        echo '<td>'.$t['amount'].'</td>';
        echo '<td>'.$t['platform'].'</td>';
        if($t['valide'] == 0) {
          $date_offer = $t["date"];
          $date_payment= date('Y-m-d H:i:s', strtotime($date_offer. ' + '.$t["day_waiting"].'  days'));
          if($t['day_waiting'] == 0) {
            echo '<td><img class="icons" src="https://turtlecash.eu/img/icons/hourglass.png" alt="en attente"></td>';
          } else {
            echo '<td><img class="icons" src="https://turtlecash.eu/img/icons/hourglass.png" alt="en attente">'.$date_payment.'</td>';
          }
        } else if($t['valide'] == 1) {
          echo '<td><img class="icons" src="https://turtlecash.eu/img/icons/verifier.png" alt="valider">  </td>';
        } else if($t['valide'] == 2) {
          echo '<td><img class="icons" src="https://turtlecash.eu/img/icons/croix.png" alt="retro"> </td>';
        }
        echo '</tr>'; 
      }
    }
      ?>
    </tbody>
  </table>


et mon code CSS :


.offers_completed {
  width100%;
  max-width600px;
  margin-top70px;
  margin-left86px;
  position: fixed;
  bottom0;
  top0;
  background-color#1f1f22;
  padding20px;
  overflow: auto;
}
.offers_completed-hide {
  position: fixed;
  left: -100%;
  text-align: center;
  transition: all .5s;  
  display: none;
 }
 .offers_completed-show {
  position: fixed;
  left0;
  transition: all .5s; 
  bottom0; 
  display: block;
 }


Je précise que j'utilise bootstrap 5 😉

Bon alors j'ai cherché et je n'ai pas trouvé sur ce sujet.

J'ai vu le ScrollTop, le ScrollLeft avec du Jquery mais ça ne répond pas à ta demande.


Pourrais-tu partager ton code avec ton CSS stp, afin que je puisse directement codé dessus.


Tu peux nous envoyer ton code via les balises </> de l'éditeur 🙃


En attendant ta réponse 😜

Salut @Arlequin29 !


C'est vraiment étrange...

Je ne sais pas non plus pour le moment.

Car moi par défaut elle a toujours été en haut.

Je me demande bien comment tu as fais 😅

Je vais faire un tour sur le Net.


Je te redis.

Cette pub permet au site de vivre ...