Er is geen CSS ondersteuning.
| tabel kolom 1 | tabel kolom 2 | tabel kolom 3 | tabel kolom 4 |
| kolommen-spul | tabel header | fixed value | vaste headers |
| meer kolommen | scrollable area | fixed header | fixed headers |
| css tabel | css tabellen | fixed tabellen | tabel headers |
| fixed header | scrollable tabel | tabel, tabellen | fixed table |
| zonder script | geen script | no javascripts | zuivere code |
| vaste kop | goede code | alleen maar css | zonder scripts |
| tabellen css | percentueel css | overbodige code | is niet nodig |
| eenvoudige tabel | met een beetje code | maar zonder script | is best makkelijk |
| tabellen ouderwets | tabellen met css | fixed header | scroll tabel |
| table scrollable | fixed header | noscript | geen javascript |
| goede code | W3C valide | HTML5 valide | geen problemen |
| een heleboel tekst om het verschuiven te kunnen controleren | daar doen we nog een beetje tekst bij | om zeker te weten dat de code in staat is om veel tekst te verwerken | tabelletje |
Er zijn twee manieren om deze tabel met fixed header op jouw scherm te zetten. De eerste is van een zeer gerespecteerde "guru" die meestal vrij neerbuigend doet tegen beginnende webmasters. Je kent ze wel. Waarom doe je dit? Waarom doe je dat? Moet ik jou nou echt alles voorkauwen?! Tsja, als je zo geniaal bent als ze zich voordoen, zal het allemaal wel.. Alleen maar naar de onderstaande code KIJKEN en er absoluut niets mee doen. Dit is nu eens een voorbeeld van hoe een "sufferd" code schrijft (sorry hoor, mijnheer de guru..).
<style>
table,td{color: #000;background:#444}
div.tableContainer{
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 756px}
html>body div.tableContainer {
overflow: hidden;
width: 756px}
div.tableContainer table {
float: left;
width: 740px}
html>body div.tableContainer table {
width: 756px}
thead.fixedHeader tr {
position: relative}
html>body thead.fixedHeader tr {
display: block}
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left}
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #eee;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px}
tbody.scrollContent tr.alternateRow td {
background: #eee;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px}
html>body thead.fixedHeader th {
width: 200px}
html>body thead.fixedHeader th + th {
width: 240px}
html>body thead.fixedHeader th + th + th {
width: 280px}
html>body thead.fixedHeader th + th + th + th{
width: 320px}
html>body tbody.scrollContent td {
width: 210px}
html>body tbody.scrollContent td + td {
width: 250px}
html>body tbody.scrollContent td + td + td {
width: 290px}
html>body tbody.scrollContent td + td + td + td{
width: 330px}
</style>
Nu moet ik bekennen dat ik ook dagelijks fouten maak, en dat zal ik de rest van mijn leven wel blijven doen. Niets menselijks is mij vreemd.. De onderstaande code doet precies hezelfde als de rommel hierboven:
<style type="text/css" media="screen">
table{border-collapse:collapse;color:#ccc;background:#050}
.eentabel{width:800px;margin-left:100px;border:2px solid #888;color:#ccc;background:#050;padding:1em}
.tabelcontainer{overflow:auto;width:99.5%;height:120px}
.tabelkop{width:96.5%;color:#fb0;background:inherit;margin-bottom:0.5em;line-height:200%}
.tabeldata{width:99.5%}
td{padding:1px 1px 2px 8px;width:24%;border-bottom:1px solid #666;line-height:150%}
</style>
Genoeg gemopperd vandaag. Kopieer de broncode van de fixed-header-tabel naar jouw webruimte en gebruik de stylesheet en de div waar je die nodig hebt. Je kan zoveel kolommen toevoegen als je wilt. Pas dan alleen even de percentages aan. Als voorbeeld: Als je 5 kolommen hebt moet je de "td" een -width- geven van 100(%) gedeeld door 5 (minus een beetje voor de "overflow"). 19% kan je hier dus voor gebruiken. Voor de tabelkop en de tabeldata kan je de verhoudingen ook makkelijk wijzigen. Zoal je gewend bent valideert de procedure op de CSS en HTML5.
cache 04-09-2010