[CSS] 'Positioneren' van DIVs in een datagrid-vorm

[KillR-B]

Ik ben bezig om een tabel vorm te geven met een combinatie van DIV-jes en CSS. De volgende code gebruik ik nu:

HTML:

<div class="scrollarea">
    <div class="row">
      <div class="cell">DIV 1</div>
      <div class="cell">DIV 2</div>
      <div class="cell">DIV 3</div>
    </div>
    <div class="row">
      <div class="cell">DIV 1</div>
      <div class="cell">DIV 2</div>
      <div class="cell">DIV 3</div>
    </div>
    <div class="row">
      <div class="cell">DIV 1</div>
      <div class="cell">DIV 2</div>
      <div class="cell">DIV 3</div>
    </div>
  </div>
</div>

Cascading Stylesheet:

.scrollarea {
  width: 200px;
  height: 100px;
  overflow: scroll;
  border: 1px solid #888;
  background: #FFF;
}

.row {
  margin: 3px;
  border: 1px solid #AAA;
  clear: left;
  height: 20px;
  /*width: 254px */
}

.cell {
  float: left;
  width: 80px;
  border: 1px solid blue;
  margin: 1px;
}

Hierbij stuit ik tegen een probleem: De laatste DIV binnen een 'rij' springt naar de volgende regel en weet niet bij welke style-element het probleem zit. white-space: nowrap bood helaas geen oplossing. Als ik een DIV met de classname "row" een breedte opgeef werkt het wel, maar aangezien het aantal cellen variabel is kan ik deze breedte niet hard in de style zetten.
Weet iemand een oplossing via CSS om alle 'cellen' binnen een 'rij' op een regel?
Hier heb ik het probleem wat duidelijker in beeld gebracht

[Verwijderd]

Waarom gebruik je niet gewoon een tabel?

[Verwijderd]

http://www.w3.org/TR/CSS21/tables.html

[KillR-B]

Verwijderd schreef op 16 mei 2004 @ 21:16:
Waarom gebruik je niet gewoon een tabel?

Dat is een terechte vraag
Ik wil uiteindelijk een DataGrid bouwen (werkend onder IE en Moz.)die een vaste header heeft en daaronder scrollable columns bevat. Een goed voorbeeld kun je zien op http://www.activewidgets.com (respect voor deze mensen die dit gebouwd hebben). Deze kan ik helaas niet gebruiken omdat ik de DataGrid in een commercieële omgeving ga gebruiken.
Maar goed terug komend op jou vraag: ik zou voor een datagrid twee tabellen kunnen gebruiken, waarbij ik bij het resizen van een column (in de header) steeds de columns van de onderste tabel mee resize. Maar ik heb dus het gevoel dat dat 'synchroon' resizen voor beide tabellen makkelijker gaat met DIV-jes, zeker aangezien ik het onder IE en Moz werkend wil hebben

Verwijderd schreef op 16 mei 2004 @ 21:19:
http://www.w3.org/TR/CSS21/tables.html

Die pagina heb ik al eens eerder bekeken, maar heb het gevoel dat de display-styles (display: table-row, display: table-cell, enz) die daar beschreven staan niet echt invloed hebben op die DIV-jes of ik gebruik ze verkeerd:

Cascading Stylesheet:

.scrollarea {
  width: 200px;
  height: 100px;
  overflow: scroll;
  border: 1px solid #888;
  background: #FFF;
  display: table;
}

.row {
  margin: 3px;
  border: 1px solid #AAA;
  clear: left;
  height: 20px;
  display: table-row;
}

.cell {
  float: left;
  width: 80px;
  border: 1px solid blue;
  margin: 1px;
  display: table-cell;
}

[Verwijderd]

KillR-B schreef op 16 mei 2004 @ 21:47:
[...]

Dat is een terechte vraag
Ik wil uiteindelijk een DataGrid bouwen (werkend onder IE en Moz.)die een vaste header heeft en daaronder scrollable columns bevat. Een goed voorbeeld kun je zien op http://www.activewidgets.com (respect voor deze mensen die dit gebouwd hebben). Deze kan ik helaas niet gebruiken omdat ik de DataGrid in een commercieële omgeving ga gebruiken.

En kopen is geen optie, begrijp ik hieruit?
(http://www.activewidgets.com/download/ zegt dat ActiveWidgets ook te koop is)

edit:
niet echt substantiele bijdrage, maar just in case...

[ Voor 6% gewijzigd door Verwijderd op 16-05-2004 22:41 ]

[KillR-B]

Verwijderd schreef op 16 mei 2004 @ 21:56:
[...]

En kopen is geen optie, begrijp ik hieruit?
(http://www.activewidgets.com/download/ zegt dat ActiveWidgets ook te koop is)

edit:
niet echt substantiele bijdrage, maar just in case...

Kopen is wellicht een goeie optie, ik zal het er eens aan m'n baas over hebben. Als ik dit ding wil 'nabouwen' ben ik wel een paar dagen zoet en dat kost m'n baas natuurlijk meer dan dat tie het gewoon ff koopt Ik dacht namelijk dat je per applicatie een licentie moest aanschaffen, maar ik die dat je een licentie per webserver kan kopen

Maar dan nog zou ik graag een oplossing willen weten voor m'n probleem, want als ik eenmaal een probleem tegenkom wil ik ook een oplossing weten

[SchizoDuckie]

KillR-B schreef op 16 mei 2004 @ 23:22:
[...]

Kopen is wellicht een goeie optie, ik zal het er eens aan m'n baas over hebben. Als ik dit ding wil 'nabouwen' ben ik wel een paar dagen zoet en dat kost m'n baas natuurlijk meer dan dat tie het gewoon ff koopt Ik dacht namelijk dat je per applicatie een licentie moest aanschaffen, maar ik die dat je een licentie per webserver kan kopen

Maar dan nog zou ik graag een oplossing willen weten voor m'n probleem, want als ik eenmaal een probleem tegenkom wil ik ook een oplossing weten

Waarom in godesnaam zo moeilijk doen???
Je kan toch een table in een divje zetten met een overflow, en daar een JS Sort aan toevoegen? Probeer dit alsjeblieft níet na te bouwen met divjes, maar doe dat gewoon met tables, die zijn gemaakt voor tabulaire data

Ik heb zelf een php class + js ding ontworpen voor dit doel, mocht je interesse hebben dan wil ik dat wel online pleuren.

edit:
Ik zie nu dat je een header wil hebben die vast blijft staan, helaas werkt het scrollen van de <tbody> alleen in mozilla, en niet in IE, en ben ik er ook verder niet aan begonnen omdat het te veel tijd kost voor zon klein stukje functionaliteit, maar dat had je vast zelf ook al gemerkt. Mocht je toch mn code willen zien geef je maar een seintje.

voorbeeldje:

[ Voor 22% gewijzigd door SchizoDuckie op 17-05-2004 09:39 ]

[Verwijderd]

Je kunt een grid echt beter in een table bouwen, ook resizen, drag & drop voor oa headers, sorteringen, etc. daar is bij een table gewoon veel minder scripting voor nodig.

Ik heb een tijd geleden zoiets nog gebouwd en ook gekeken naar div's omdat je hierbij niet vast zit aan de relaties van rows, columns in een table maar deze relaties zul je altijd houden in een grid.

Het scheelt je ook veel werk, aangezien je al via de browser collecties kunt aanroepen via DOM, rows, cols, tbody, thead, tfoot, etc.