Hm, een tabel lijkt me toch een beetje gek hier. Bijvoorbeeld het selecteren gaat dan gelijk anders/mis. Helaas werkt het volgende nu alleen goed in FF:
HTML:
1
2
3
4
5
6
7
8
| <div style="column-count:2;-moz-column-count:2">
<ol
><li>naam1</li
><li>naam2</li
><li>naam3</li
><li>naam4</li
></ol>
</div> |
Zoek je naar
css multi-column list, dan vind je bijv.
deze methode:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
| <style type="text/css">
ol { margin: 0 0 1em 2em; padding: 0; }
ol li { line-height: 1.2em; margin: 0; padding: 0; }
ol li.column1 { margin-left: 0em; }
ol li.column2 { margin-left: 10em; }
</style>
<ol
><li class="column1">naam1</li
><li class="column1">naam2</li
><li class="column2" style="margin-top:-2.4em">naam3</li
><li class="column2">naam4</li
></ol> |
Een for-loopje, 3 verschillende gevallen dus. Selecteren werkt alsnog niet helemaal goed in IE. Vooral de vraag wat je doet als de naam echt te lang wordt is interessant. Wellicht is de volgende table-hack dan toch het makkelijkst:
HTML:
1
2
3
4
5
6
7
8
| <table><tr><td>
<ol
><li>naam1</li
><li>naam2</li
></ol></td><td><ol start=3
><li>naam3</li
><li>naam4</li
></ol></td></tr></table> |
Een for-loopje, 2 gevallen, automatische nummering & breedte, selecteren werkt. Alternatief kunnen ook
dit soort dingen voor het krijgen van twee kolommen.