Scrollen in een tabel - Softwareontwikkeling

maandag 17 juli 2006 10:34

Acties:

Verwijderd

Topicstarter

Ik probeer in een tabel met veel data de eerste kolommen vast te zetten zodat bij het scrollen deze blijven staan. Na wat zoekwerk heb ik het via een style-sheet ondertussen voor elkaar gekregen.

De eerste kolommen blijven keurig vast staan als ik ga scrollen en de andere kolommen scrollen wel gewoon.

Ik loop echter tegen het probleem aan dat in een cel die meescrollt een dropdownmenu staat dat op het moment dat het bij de vaste kolommen komt gewoon over de kolommen heen scrollt. Ik heb gezocht, maar nergens een oplossing kunnen vinden.

Heeft iemand misschien een oplossing voor dit probleem?

maandag 17 juli 2006 10:37

Acties:

chem

Reist de wereld rond

Hoe heb je het opgelost? Klinkt als een render-issue in IE, en dat is dan afaik wel bekend.

Klaar voor een nieuwe uitdaging.

maandag 17 juli 2006 10:38

Acties:

Nielsvr

Ik snap niet echt wat je bedoelt, maar als je de lage wilt indelen dat het één en ander over elkaar heen gaat liggen kan je gebruik maken in je css van z-index.

maandag 17 juli 2006 10:52

Acties:

Verwijderd

Topicstarter

Ik heb het op de volgende manier opgelost:

HTML:

<html>
<head>
<title></title>
        
<style>
#container{
    overflow: scroll;
    width: 600px;
    border-left: 1px black solid;
    margin-bottom: 10px;
    }
#dataTable{
    border-collapse: collapse;
    border: black 1px solid;
    width: 100%;
    background-color: #f7f7f7;
    }
#dataTable .rowHeader{
    background-color: Wheat;
    border: none;
    border-right: #666 1px solid;
    left: expression(document.getElementById("container").scrollLeft-1);
    position: relative;
    }
#dataTable td{
    white-space: nowrap;
    border: 1px silver solid;
    padding: 2px;
    }

/*the following styles have nothing to do with column locking*/
body {margin: 20px 3%; background-color: Ivory}
p.cite  {
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 85%;
    border: double 4px #606;
    padding: 8px 20px;
    background-color: whitesmoke;
    width: 100%;
}
</style>        
</head> 
<body>  

<div id="container">
<table id="dataTable">
    <tr>
    <td class="rowHeader">Row Header 1</td>
    <td class="rowHeader">Row Header 2</td>
    <td><select>
        <option>Eerste</option>
        <option>Tweede</option>
        <option>Derde</option>
    </select></td>
    <td>Row 1 cell 4</td>
    <td>Row 1 cell 5</td>
        </tr>
    
    <tr>
    <td class="rowHeader">Row Header 1</td>
    <td class="rowHeader">Row Header 2</td>
    <td>Row 2 cell 3</td>
    <td>Row 2 cell 4</td>
    <td>Row 2 cell 5</td>
    
    </tr>

    <tr>
    <td class="rowHeader">Row Header 1</td>
    <td class="rowHeader">Row Header 2</td>
    <td>Row 3 cell 3</td>
    <td>Row 3 cell 4</td>
    <td>Row 3 cell 5</td>
    
    </tr>
    <tr>
    <td class="rowHeader">Row Header 1</td>
    <td class="rowHeader">Row Header 2</td>
    <td>Row 4 cell 3</td>
    <td>Row 4 cell 4</td>
    <td>Row 4 cell 5</td>
    
    </tr>
    <tr>
    <td class="rowHeader">Row Header 1</td>
    <td class="rowHeader">Row Header 2</td>
    <td>Row 5 cell 3</td>
    <td>Row 5 cell 4</td>
    <td>Row 5 cell 5</td>
    <
    </tr>
    <tr>
    <td class="rowHeader">Row Header 1</td>
    <td class="rowHeader">Row Header 2</td>
    <td>Row 6 cell 3</td>
    <td>Row 6 cell 4</td>
    <td>Row 6 cell 5</td>
    
    </tr>
    <tr>
    <td class="rowHeader">Row Header 1</td>
    <td class="rowHeader">Row Header 2</td>
    <td>Row 7 cell 3</td>
    <td>Row 7 cell 4</td>
    <td>Row 7 cell 5</td>
    
    </tr>               
            </table>
</div>
    

</body>
</html>

Ik heb het geprobeerd met layers maar dit lost het probleem helaas niet op.

maandag 17 juli 2006 11:32

Acties:

chem

Reist de wereld rond

wat een compleet wazige structuur... kan je eens met een screenshot laten zien wat je aan het doen bent?

Klaar voor een nieuwe uitdaging.

maandag 17 juli 2006 11:59

Acties:

Verwijderd

Topicstarter

De structuur die je ziet is het voorbeeld dat ik gevonden heb waar ik het scrollen mee voor elkaar heb gekregen.

Dit is de link ervan:
http://web.tampabay.rr.co...mples/freeze-columns.html

Als ik dan dus een dropdown toevoeg, scrollt de dropdown er overheen.

maandag 17 juli 2006 12:06

Acties:

WormLord

Devver

Dat komt omdat dropdown's een windowed object zijn in IE, waardoor ze buiten de z-index van de pagina vallen. Dit betekend dat ze altijd over elementen van dezelfde pagina zullen vallen. Dit zul je ook hebben met bijvoorbeeld flash-animaties.
Om dit op te lossen zul je volgens mij de dropdown's moeten verbergen als ze 'achter' de vaste kolommen komen.

maandag 17 juli 2006 12:11

Acties:

Verwijderd

Topicstarter

Enig idee hoe je ze kunt "verbergen" als ze achter de vaste kolommen komen?

maandag 17 juli 2006 15:03

Acties:

moozzuzz

randomised guess:

JavaScript:

1	visibility: hidden