en essayant de geler la colonne de gauche

-1

Je voudrais que la colonne de gauche soit corrigée lorsque je fais défiler vers la droite.en essayant de geler la colonne de gauche

Voici mon code, merci. table css

<script type="text/javascript"> 

$(function() 
{ 
    //alert("testme"); 
    //$('#addScroll').jScrollPane(); 
    //$('#addScroll').scrollTo(150, 800); 
}); 


function show() { 
    //alert("test"); 
    var shDiv = document.getElementById("thisOne").style.display; 
    if(shDiv == "none") 
    { 
     document.getElementById("thisOne").style.display='block'; 
    } 
    else{ 
     document.getElementById("thisOne").style.display='none'; 
    } 



//document.getElementById("noe").style.display='none'; 

} 
</script> 

<style type="text/css"> 
* { 
    margin: 0; 
    padding: 0 
} 

.container { 
    background-color: #FFFFCC; 
    width: 1560px; 
    border: 1px solid #000; 
} 

* html .container { 
    width: 762px; 
} 

.header { 
    width: 1560px; 
    border-bottom: 1px solid #000; 
} 

.header ul { 
    list-style: none 
} 

.header ul li { 
    width: 150px; 
    border-left: 1px solid #000; 
    float: left; 
    font-weight: bold; 
    padding-left: 2px; 
} 

* html .header ul li { 
    width: 151px; 
} 

.data { 
    width: 150px; 
    float: left; 
    padding-left: 2px; 
    border-left: 1px solid #000; 
} 

.subColumn { 
    width: 150px; 
    float: left; 
    padding-left: 0px; 
    border-right: 1px solid #000; 
} 

.subData { 
    width: 150px; 
    float: left; 
    padding-left: 2px; 
    border-right: 1px solid #000; 
} 

* html .data { 
    width: 152px; 
} 

.rowodd,.roweven { 
    position: relative; 
    width: 1560px; 
    border-top: 1px solid #000; 
    background-color: #E8E8E8; 
} 

.roweven { 
    background-color: #D1DCE9; 
} 

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.clearfix { 
    display: inline-block; 
} 
</style> 
</head> 

<body> 
<div style="overflow-y:hidden;overflow-x:scroll"> 
<div class="container clearfix"> 
    <div class="header clearfix"> 
    <ul> 
    <li>&nbsp</li> 
    <li>QMPlus</li> 
    <li>WHAT</li> 
    <li>ICFWiz</li> 
    <li>QM</li> 
    <li>ToolBar</li> 
    <li>DIBWiz</li> 
    <li>RZWiz</li> 
    <li>ARCH</li> 
    <li>ToolBar</li> 
    </ul> 
</div> 

<div style="overflow-y:scroll;overflow-x:hidden"> 
    <div class="rowodd clearfix"> 
    <div class="data"> 
     <p>Total <a href="#" onclick="show();">+</a></p> 
     <div class="roweven clearfix" id="thisOne" style="display:none"> 
     <div class="subColumn"> 
      Area 1 
     </div> 
     <div class="subData"><p>Netflix</p></div> 
     <div class="subData"><p>BlockBuster</p></div> 
     <div class="subData"><p>Vudu</p></div> 
     <div class="subData"><p>Cine</p></div> 
     <div class="subData"><p>PS3</p></div> 
     <div class="subData"><p>boxee</p></div> 
     <div class="subData"><p>AppleTv</p></div> 
    enter code here<div class="subData"><p>PS3</p></div> 
     </div> 
    </div> 
    <div class="data"><p>Boxee</p></div> 
    <div class="data"><p>1</p></div> 
    <div class="data"><p>24</p></div> 
    <div class="data"><p>45</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 
    <div class="data"><p>boxee</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 
    </div> 
    <div class="roweven clearfix"> 
    <div class="data"> 
     <p>Chicago</p> 

    </div> 
    <div class="data"><p>1</p></div> 
    <div class="data"><p>3</p></div> 
    <div class="data"><p>test</p></div> 
    <div class="data"><p>place</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 
    <div class="data"><p>boxee</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 
    </div> 
    <div class="rowodd clearfix"> 
    <div class="data"> 
     <p>New York</p> 

    </div> 
    <div class="data"><p>2</p></div> 
    <div class="data"><p>0</p></div> 
    <div class="data"><p>why</p></div> 
    <div class="data"><p>google</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 
    <div class="data"><p>boxee</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 
    </div> 
    <div class="rowodd clearfix"> 
    <div class="data"> 
     <p>Atlanta</p> 

    </div> 
    <div class="data"><p>2</p></div> 
    <div class="data"><p>0</p></div> 
    <div class="data"><p>where</p></div> 
    <div class="data"><p>go</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 
    <div class="data"><p>boxee</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 
    </div> 
    <div class="rowodd clearfix"> 
    <div class="data"> 
     <p>Boston</p> 

    </div> 
    <div class="data"><p>2</p></div> 
    <div class="data"><p>0</p></div> 
    <div class="data"><p>test1</p></div> 
    <div class="data"><p>play</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 
    <div class="data"><p>boxee</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 
    </div> 
    <div class="rowodd clearfix"> 
    <div class="data"> 
     <p>Phil</p> 

    </div> 
    <div class="data"><p>2</p></div> 
    <div class="data"><p>0</p></div> 
    <div class="data"><p>xbox</p></div> 
    <div class="data"><p>boxee</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 
    <div class="data"><p>boxee</p></div> 
    <div class="data"><p>AppleTv</p></div> 
    <div class="data"><p>PS3</p></div> 

    </div> 
</div> 
</div> 
</div> 
</body> 
</html>

Source

2010-01-15 Noe

Vous vous moquez de moi ?! Il suffit de s'en aller ... –

Je vous recommande de réduire cela en un exemple simplifié et ensuite poser des questions plus spécifiques. –

Bien révisé Mark! – Codesleuth

position:fixed;

Source

2010-01-15 16:23:19

Lol, agréable et court. Mais sérieusement, oui, cela ressemble à ce dont Noe a besoin. +1 – Codesleuth

Si vous voulez travailler dans IE6, et donc ne veulent pas utiliser la position: fixe, vous devriez envisager d'utiliser le plug-in jquery scrollFollow. Vous pouvez le trouver ici:

http://kitchen.net-perspective.com/open-source/scroll-follow/

Bonne chance!

Source

2010-01-15 16:41:26 Matrym

en essayant de geler la colonne de gauche

Répondre

Questions connexes