css/jquery: fixe lors du défilement horizontal mais pas vertical

J'ai une grande table avec en-têtes comme première colonne, et un plugin curseur jQuery (de https://github.com/keesschepers/jquery-ui-content-slider) pour faire défiler la table horizontalement tout en gardant la première colonne fixe.css/jquery: fixe lors du défilement horizontal mais pas vertical

Cependant, si j'essaie de faire défiler vers le bas (verticalement) je ne peux pas voir le reste de la première colonne (plus grande que la hauteur de l'écran) car elle a la propriété fixe (css). Y at-il un astuce css ou jQuery pour résoudre ce problème?

CSS code:

 table tr td:first-child { position: fixed; }

Code HTML:

 <div id="#content-scroll"> 
     <table> 
     <tr><td></td>...and many more cells</tr> 
     ...and many more rows 
     </table></div>

jQuery code:

   <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#content-slider").slider({ 
       animate: true, 
       change : function (e, ui) { 
        var maxScroll = $("#content-scroll").prop("scrollWidth") - 
         $("#content-scroll").width(); 
        $("#content-scroll").animate({ 
         scrollLeft : ui.value * (maxScroll/100) 
        }, 1000); 
       }, 
       slide : function (e, ui) 
       { 
        var maxScroll = $("#content-scroll").prop("scrollWidth") - 
         $("#content-scroll").width(); 
        $("#content-scroll").prop('scrollLeft' ,ui.value * (maxScroll/100)); 
       } 
      }); 
     }); 
    </script>

Source

2011-11-04 Miu

Avez-vous essayez de définir une hauteur et trop-plein-y sur le tbody? – Mottie

Modifiez 'overflow: hidden' sur # content-faites défiler jusqu'à' overflow-x: hidden; 'si vous voulez un défilement vertical en ligne, sinon réglez la hauteur sur une valeur supérieure ou vérifiez-la avec jquery :) –

@fudgey Je ne sais pas J'ai un tbody n'importe où dans mon code, et je ne suis pas sûr de savoir comment en avoir un. – Miu

Malheureusement, je ne suis pas trop familier avec cette bibliothèque de table, donc je viens de jeter quelque chose ensemble ici qui fonctionne sur FireFox (je suis sûr que Kees Schepers gère mieux le style cross-browser que je ne le souhaite). De toute façon, la partie importante est div (#d) autour de la table (#t) avec position:relative;. Cela permet au position:absolute; des éléments :first-child de prendre effet par rapport au #d stationnaire au lieu du #t de défilement.

Exemple HTML:

<html> 
<head> 
    <style type="text/css"> 
    #d { /*** Important part is here ***/ 
     position:relative; 
    } 
    #t { 
     display:block; 
     overflow-x:scroll; 
     overflow-y:visible; 
     width:412px; 
    } 
    #t tbody { 
     display:block; 
     margin-left:202px; 
    } 
    #t th, 
    #t td { 
     border:1px solid #000; 
    } 
    #t tr th:first-child, 
    #t tr td:first-child { 
     background:#FFF; 
     left:0; 
     position:absolute; 
     width:200px; 
    } 
    #t tr td div { 
     height:200px; 
     width:200px; 
    } 
    </style> 
</head> 
<body> 
    <div id="d"> 
     <table id="t" cell-padding="0" cell-spacing="0"> 
      <tr> 
       <th>head1</th> 
       <th>head2</th> 
       <th>head3</th> 
       <th>head4</th> 
      </tr> 
      <tr> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
      </tr> 
      <tr> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
       <td><div>###</div></td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

espoir qui aide certains.

Source

2012-05-22 08:10:01 pieman72

Quelqu'un a aimablement écrit ceci pour que vous fassiez exactement ce dont vous avez besoin, comme une solution pour faire fonctionner les tables dans une mise en page réactive. Check it out:

http://www.zurb.com/playground/responsive-tables

Source

2012-05-22 11:42:07 thebiffboff

Cela fonctionne parfaitement sur Firefox, malheureusement pas du tout sur IE: / – Miu

css/jquery: fixe lors du défilement horizontal mais pas vertical

Répondre

Questions connexes