Scfrollable tabel met vaste header

Vragen over html, css en aanverwante onderwerpen die met het maken van 'n site te maken hebben. In principe, vanwege tijdgebrek, alleen over code op deze site, maar je kunt natuurlijk altijd proberen...
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Scfrollable tabel met vaste header

Bericht door amjjanssen »

Hallo,
Ik heb een tabel met een vaste header en daaronder scrollable 'cellen'. Dat werkt goed.
De header is ok.

De cellen van de rest van de tabel echter zijn allemaal even breed, dus soms te breed en soms niet breed genoeg.
Heb van alles geprobeerd mbv <th> en <td> enz, maar helaas.
Hoe kan ik de hoogte en breedte van de tabel-cellen beinvloeden?
De waarde in de cellen wordt uit een database gehaald, maar dat is volgens mij niet zo belangrijk (?)
Zie de code hieronder:
===================

<html>
<head>
<title>Fixed Header - Scrollable Table</title>
<style type="text/css">

table#header th {border-right:solid 1px #000}
table#header th#right-border {padding:0 4px 0 3px;border-right:none;}
table#tbl-content td {border-bottom:solid 1px #bbb;border-right:solid 1px #bbb;}
table#tbl-content tr#bottom td {border-bottom:none;}

#box{
width:100%;
height:700px;
overflow-y:auto;
border:solid 1px #000;
border-top:none;
}
#tbl-content{
width:1450px;
table-layout:fixed;
background:#fff;
}
#header{
width:1450px;
text-align:left;
table-layout:fixed;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="content" style="width:99% #000;">
<div id="boundary" style="margin-right:-2px;background:lightblue;border:solid 1px #000;">
<table id="header" cellpadding="3" cellspacing="0" border="0">
<tr>
<th width="3%">Nr</th>
<th width="3%">Wijzig</th>
<th width="3%">Bekijk</th>
<th width="3%">Verw</th>
<th width="8%">Wie</th>
<th width="8%">Wat</th>
<th width="8%">Waar</th>
<th width="8%">Waarom</th>
<th width="5%">OpnDatum</th>
<th width="10%">Opm OpnDatum</th>
<th width="5%">ImpDatum</th>
<th width="8%">Pad</th>
<th width="8%">Beschr</th>
</tr>
</table>
</div>

<div id="box">
<table id="tbl-content" cellpadding="0" cellspacing="0" border="1">
<tr>


<?php
// Open de database.
include ('includes/database_connect.php');

// Sorteren........
$sql="SELECT * FROM TAB_FotosEnVideos ";
$result = mysqli_query($dbcnx,$sql);
if (!$result) { die('De volgende fout is opgetreden bij het lezen van tabel TAB_FotosEnVideos: ' . mysqli_error($dbcnx));};

// Bepalen lopend aantal records uit Tab_Diversen

$sql = "SELECT div_volgnr FROM TAB_Diversen";
$ok=mysqli_query($dbcnx, $sql);
if (!$ok) { die('<br>De volgende fout is opgetreden bij het lezen uit tabel TAB_Diversen: ' . mysqli_error($dbcnx)); }

$row = mysqli_fetch_array($ok);
$div_volgnr=$row['div_volgnr'];

if ($div_volgnr!=0) {

while ( $row = mysqli_fetch_array($result) ) {
echo ('<tr>');

echo ('<td>' . $row['nummer'] . '</td>');
echo ('<td><a href=wijzigen.php?id=' . $row['id'] . '>
<center><img src="images/wijzig.png" border="0" alt="Wijzigen" title="Wijzigen" ></center></a></td>');

echo ('<td><a href=show.php?pad='. $row['pad'] . '>
<center><img src=" ' . $row['pad'] . ' " width="35" height="40" border="0" alt="Bekijken" title="Bekijken" ></center></a></td>');

echo ('<td><a href=verwijderen.php?id=' . $row['id'] . '>
<center><img src="images/no.gif" border="0" alt="Verwijderen" title="Verwijderen" ></center></a></td>');


echo ('<td>' . $row['wie'] . '</td>');
echo ('<td>'. $row['wat'] . '</td>');
echo ('<td>' . $row['waar'] . '</td>');
echo ('<td>' . $row['waarom'] . '</td>');
echo ('<td>' . $row['opndatum']. '</td>');
echo ('<td>' . $row['opmopndat']. '</td>');
echo ('<td>' . $row['impdatum']. '</td>');
echo ('<td>' . $row['pad'] . '</td>');
echo ('<td>' . $row['beschr'] . '</td>');

echo ('</tr>');

}


} else {
echo "<br><center><font color='red'>Er zijn geen bestanden in de database opgeslagen</font></center>";
}


?>


</table>
</div>
</div>
</div>
</body>
</html>
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Scfrollable tabel met vaste header

Bericht door Goeroeboeroe »

Hallo,

Eigenlijk is dit forum voor vragen over de voorbeelden op deze site. Maakt verder niet uit, alleen zul je hier alleen van mij 'n antwoord krijgen. Op helpmij.nl of zo kijken meer mensen, waardoor je mogelijk sneller 'n antwoord krijgt. En meer ogen verkleint de kans op foute antwoorden ook. Dat even terzijde.

Ik weet niet helemaal zeker wat je bedoelt. Moeten de cellen even breed worden als de erboven staande kopjes?
Eerst het simpele deel: de hoogte van de cellen wordt automatisch geregeld, daar hoef je niets voor te doen. Als één cel hoger is, worden de andere cellen automatisch ook hoger.
Zoals het nu is, zal het niet werken. Je hebt twee tabellen, die helemaal niets met elkaar te maken hebben. Als je de breedte van de cellen op een of andere manier met de kopjes wilt laten corresponderen, zul je één tabel moeten maken.

Als je geen breedte opgeeft, zullen de kopjes (en daarmee ook de cellen) even breed worden als de breedste cel.
Met table-layout: fixed; worden de kopjes (en daarmee ook de cellen) even breed als nodig is om de inhoud van de eerste rij weer te kunnen geven.

Als je wel 'n breedte opgeeft, wordt die gebruikt voor de volledige kolom. Alle cellen zijn altijd per definitie even breed in een tabel. Maar ook daarbij geldt: als er 'n lang woord of zo in staat, 'wint' dat van de breedte. (Je zou voor de zekerheid iets als word-break: break-all; bij <td> kunnen gebruiken. Eventueel te lange woorden worden dan op een willekeurige plek in het woord afgebroken.)

In principe zou het niet moeten uitmaken, waar de inhoud vandaan komt. Bij gebruik van php wordt de pagina op de server samengesteld, dus de browser ziet het alsof je het zelf hebt ingetypt in de html.

Omdat ik je vraag mogelijk niet helemaal goed begrijp, laat ik het hier even bij. Behalve nog wat algemene dingen.

Mogelijk staat dit wel in je echte code, maar voor de zekerheid:
Bovenaan je pagina moet staan <!doctype html>, als allereerste regel. Dat is uiterst belangrijk, want zonder doctype gaan browsers het weergeven in een verouderd model, waarbij de ene browser iets totaal anders dan de andere browser kan laten zien.
In de <head> moet ook staan <meta charset="utf-8">, als eerste regel in de <head>. Dit zorgt ervoor dat accenten e.d. overal goed worden weergegeven.
Bij <html> zou je de taal aan kunnen geven. Dat is van belang voor bijvoorbeeld schermlezers, die de pagina voorlezen. Iets als <html lang="nl"> voor Nederlands.

Verder worden attributen als width, cellpadding, cellspacing en border niet meer in de html aangegeven, maar met css. Dat maakt het veel makkelijker om iets te wijzigen. Je kunt je code valideren (controleren op fouten) op https://validator.w3.org/nu/, maar dat zal alleen werken als je dit soort attributen niet meer gebruikt. Anders geeft de validator veel te veel foutmeldingen, waardoor je verdrinkt in de meldingen.
In je css staat 'widh'. (Mogelijk staat dat wel goed in je echte code.) Een validator is ideaal voor dat soort fouten: die worden er onmiddellijk uitgepikt.
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Scfrollable tabel met vaste header

Bericht door amjjanssen »

Hartelijk dank voor je uitgebreide en snelle antwoord.
De bedoeling is inderdaad dat de cellen even breed worden als in de header.
Vandaar dat ik de cellen van de header én de cellen in de tabel even breed probeer te maken mbv de percentages.
Ik ga je antwoord bestuderen.
Mvg
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Scfrollable tabel met vaste header

Bericht door Goeroeboeroe »

Dan hoef je dus eigenlijk alleen maar op te letten dat de inhoud van 'n cel niet onwijs breed wordt. Dat is niet al te ingewikkeld. Als je nog vragen hebt, hoor ik het wel. Succes!
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Scfrollable tabel met vaste header

Bericht door amjjanssen »

Hallo,
het kostte enige moeite maar ik heb eea zodanig aangepast dat er nu één tabel is, zoals je - terecht - hebt geadviseerd.
Het werkt prima maar ik heb nog twee probleempjes/vragen/uitdagingen:
- alle kolommen zijn nu even breed. Hoe kan ik bepaalde kolommen een andere breedte geven dan de rest?
Heb al geprobeerd met 'width' maar zonder succes of in de verkeerde rule?
- hoe kan ik de lijnen om en om een andere achtergrondkleur geven, voor de duidelijkheid?
Bvd en mvg
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Scfrollable tabel met vaste header

Bericht door amjjanssen »

Oh ja, hier nog de code:
====================


<html>
<style type="text/css">

table.scroll {
width: 100%;
border-spacing: 0;
border: 2px solid black;
}

table.scroll th,
table.scroll td,
table.scroll tr,
table.scroll thead,
table.scroll tbody { display: block; }

table.scroll thead tr {
/* fallback */
width: 97%;
background-color: lightblue;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}

table.scroll tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}

table.scroll tbody {
height: 700px;
overflow-y: auto;
overflow-x: hidden;
}

table.scroll tbody td,
table.scroll thead th {
width: 7.4%;
float: left;
border-right: 1px solid black;
height: 35px;
//border-top: 1px solid black;
border-bottom: 1px solid black;
overflow: auto;
//text-overflow:ellipsis;
}

thead tr th {
height: 35px;
line-height: 35px;
text-align: left;
//border-right: 1px solid black;
}

tbody { border-top: 2px solid black;
border-bottom: 1px solid black;
}

tbody td:last-child, thead th:last-child {
border-right: none !important;
}
</style>


<table class="scroll">
<thead>
<tr>
<th>Nr</th>
<th>Wijzig</th>
<th>Bekijk</th>
<th>Verw</th>
<th>Wie</th>
<th>Wat</th>
<th>Waar</th>
<th>Waarom</th>
<th>OpnDatum</th>
<th>Opm OpnDat</th>
<th>ImpDatum</th>
<th>Pad</th>
<th>Beschr</th>
</tr>
</thead>
<tbody>
<?php
// Open de database.
include ('includes/database_connect.php');

// Sorteren........
$sql="SELECT * FROM TAB_FotosEnVideos ";
$result = mysqli_query($dbcnx,$sql);
if (!$result) { die('De volgende fout is opgetreden bij het lezen van tabel TAB_FotosEnVideos: ' . mysqli_error($dbcnx));};

// Bepalen lopend aantal records uit Tab_Diversen

$sql = "SELECT div_volgnr FROM TAB_Diversen";
$ok=mysqli_query($dbcnx, $sql);
if (!$ok) { die('<br>De volgende fout is opgetreden bij het lezen uit tabel TAB_Diversen: ' . mysqli_error($dbcnx)); }

$row = mysqli_fetch_array($ok);
$div_volgnr=$row['div_volgnr'];

if ($div_volgnr!=0) {

while ( $row = mysqli_fetch_array($result) ) {
echo ('<tr>');

echo ('<td>' . $row['nummer'] . '</td>');

echo ('<td><a href=wijzigen.php?id=' . $row['id'] . '>
<center><img src="images/wijzig.png" alt="Wijzigen" title="Wijzigen" ></center></a></td>');

echo ('<td><a href=show.php?pad='. $row['pad'] . '>
<center><img src=" ' . $row['pad'] . ' " width="35px" height="35px" alt="Bekijken" title="Bekijken" ></center></a></td>');

echo ('<td><a href=verwijderen.php?id=' . $row['id'] . '>
<center><img src="images/no.gif" alt="Verwijderen" title="Verwijderen" ></center></a></td>');


echo ('<td>' . $row['wie'] . '</td>');
echo ('<td>'. $row['wat'] . '</td>');
echo ('<td>' . $row['waar'] . '</td>');
echo ('<td>' . $row['waarom'] . '</td>');
echo ('<td>' . $row['opndatum']. '</td>');
echo ('<td>' . $row['opmopndat']. '</td>');
echo ('<td>' . $row['impdatum']. '</td>');
echo ('<td>' . $row['pad'] . '</td>');
echo ('<td>' . $row['beschr'] . '</td>');

echo ('</tr>');

}


} else {
echo "<br><center><font color='red'>Er zijn geen bestanden in de database opgeslagen</font></center>";
}


?>
</tr>
</tbody>
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Scfrollable tabel met vaste header

Bericht door Goeroeboeroe »

Hallo,

(Ik had dit al getypt voor je de code stuurde. Ik zie nu dat je ook :last-child gebruikt. Mogelijk is dit antwoord dan iets te uitgebreid, maar ik weet niet wat je al wel of niet weet, dus vandaar het wat uitgebreide verhaal.)

Voor de breedte moet je bij table

Code: Selecteer alles

table {tabel-layout: fixed;}
zetten. (Anders bepaalt de browser de breedte automatisch aan de hand van de inhoud van de breedste cel).
Vervolgens kun je voor elke kolom afzonderlijk een breedte opgeven. (Maar als de inhoud van een header of cel breder is dan die opgegeven breedte, 'wint' die breedte het. Dat is het geval bij bijvoorbeeld een lang woord. Wat er dan gebeurt is wat moeilijk te voorspellen. Als het geheel breder is dan de tabel, wordt het niet passende gewoon naast de tabel gezet. Minder mooi, maar er verdwijnt in ieder geval niets. Losse woorden en zoworden gewoon op een volgende regel gezet, dat is geen probleem.)

Jij hebt de breedte opgegeven in de html. In principe kan dat wel, maar tegenwoordig wordt dat normaal genomen in de css gedaan:

Code: Selecteer alles

th:first-of-type {width: 3%;}
th:nth-of-type(2) {width: 3%;}
th:nth-of-type(3) {width: 8%:}
Enz, t/m de laatste:

Code: Selecteer alles

th:nth-of-type(10) {width: 8%;}
th:last-of-type {width: 8%;}
th:first-of-type is (verrassing) de eerste <th>. nth-of-type(2) is de tweede, enz., t/m nth-of-type(10) (de tiende) en de laatst is th:last-of-type. (Dit werkt alleen maar als ze dezelfde ouder hebben, dan kun je gewoon de volgnummers gebruiken.)
(Omdat de eerste en laatste zoveel worden gebruikt, hebben die 'n eigen naam. Maar je kunt ook in plaats van first-of-type gewoon nth-of-type(1) gebruiken.)

Je kunt ze ook combineren:

Code: Selecteer alles

th {width: 8%;}
th:first-of-type, th:nth-of-type(2) {width: 3%;}
th:nth-of-type(7), th:nth-of-type(9) {width: 5%;}
th:nth-of-type(8) {width: 10%;}
Dat voorkomt typekramp. 8% komt het meest voor, dus ik maak ze eerst allemaal 8% breed. Daarna geef ik degene die 'n andere breedte moeten geven op.

De border kun je op ongeveer dezelfde manier doen. Als het om en om moet is dat zelfs heel eenvoudig:

Code: Selecteer alles

th:nth-of-type(odd), td:nth-of-type(odd) {border: red solid 1px;}
th:nth-of-type(even), td:nth-of-type(even) {border: blue solid 1px;}
Elke oneven (odd) th en td krijgen nu een rode rand. Elke even krijgen een blauwe rand. Je gebruikt weer nth-of-type, maar omdat even en oneven ook heel vaak worden gebruikt, hebben die ook weer afkortingen gekregen, zodat je bij 200 elementen je niet 200 keer 'n even of oneven volgnummer hoeft te typen.
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Scfrollable tabel met vaste header

Bericht door amjjanssen »

waaw.....daar ga ik in het weekend eens mee aan de gang!
We moeten straks toch binnen blijven dus mooie gelegenheid om dit te bestuderen.
Harstikke bedankt alvast. Ik hoop dat ik je lastig mag blijven vallen met dit soort vragen?
Bvd en mvg
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Scfrollable tabel met vaste header

Bericht door Goeroeboeroe »

Hoi,
Jazeker mag je blijven 'lastig vallen'. Vrijwel iedereen maakt tegenwoordig 'n site in WordPress of zoiets, of heeft Facebook. Mensen die zelf nog 'n site maken zijn aan het uitsterven. Helaas, want het wordt er niet minder saai door. Dus ik vind het best leuk, als er eindelijk weer 'ns iemand langskomt die dat nog doet.
Wat ik trouwens nog vergat, en voor de tabel ook niet echt van belang, denk ik. first-of-type en last-of-type hebben nog 'n voordeel: als je 'n element tussenvoegt, blijven ze altijd de eerste en laatste.
Goed, prettig weekend gewenst en ik ben blij dat ik je vanavond iets te doen heb gegeven :D
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Scfrollable tabel met vaste header

Bericht door amjjanssen »

Hallo,
Nee, ik heb wel WordPress maar hou liever "feeling met de code" als je begrijpt wat ik bedoel.
Ben nog niet zo lang bezig met CSS, leer er steeds wat bij, maar ik vind het wel erg lastig te gebruiken en te interpreteren.
Het heeft wel veel voordelen, dus ik ga het steeds meer gebruiken.

Ik heb nog wat vragen over je advies uit het vorige bericht:
- waar moet ik: table {tabel-layout: fixed;} zetten? Is dit gewoon een afzonderlijke style tussen de rest of moet het ergens aan worden toegevoegd?
- en waar:
th {width: 8%;}
th:first-of-type, th:nth-of-type(2) {width: 3%;}
th:nth-of-type(7), th:nth-of-type(9) {width: 5%;}
th:nth-of-type(8) {width: 10%;}

Bedankt, nog een prettige zondag en tot een volgende keer.
André
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Scfrollable tabel met vaste header

Bericht door Goeroeboeroe »

Hallo,

Ja, die 'feeling met de code', da's juist het leuke. Vind ik.
css wordt trouwens in razend tempo ingewikkelder, dus je kunt je lol nog op.

Die regels zoals table {table-layout: fixed;} zet je gewoon in de css, net zoals daar nu al staat tbody {border-top enz.;}
Je hebt al een regel voor table.scroll staan zie ik, daar kan table-layout:fixed; gewoon bij.

O, voor th wordt het 'n beetje lastiger.
Ik zie dat er bij table.scroll thead th nog 'n width: 7,4% in zit. Moet die er niet uit?

Jij gebruikt (vrijwel) overal table.scroll aan het begin. Tenzij je meer tabellen hebt, zou dat weg kunnen. Als je alleen th gebruikt en er zijn geen andere tabellen met een th, dan is die class .scroll niet nodig, en table aan het begin ook niet.
Ik zie ook staan table.scroll tbody td, table.scroll thead th. Daar kun je volgens mij volstaan met alleen td, th. Als er verder geen <th>'s en <td>'s op de pagina aanwezig zijn, levert dat geen problemen op. (Als er wel meer tabellen zijn, moet je table.scroll natuurlijk laten staan.)

Als table.scroll e.d. weg kunnen, dan kun je de css voor de th gewoon precies zo overnemen, zoals ik heb geschreven. Let er wel op dat de gewone th (zonder :first-of-type e.d.) bovenaan staat, want in principe overrulet een latere regel in de css een eerdere.
'In principe', dus. En dat is een van de lastigste dingen om in je vingers te krijgen: specificity. Die latere regel 'wint' alleen, als de regels dezelfde specificiteit hebben. (Als ik ooit degene in m'n handen krijg die dat woord verzonnen heeft... Niet te typen. Goed.)
Als je table.scroll th toch moet gebruiken, dan zit daarin twee elementen (table en th) en één class (scroll).
Als je mijn th:first-of-type gebruikt, zit daarin één element (th) en één 'pseudo-class' ('first-of-type'). Die pseudo-class is voor de specificiteit hetzelfde als een gewone class, dus eigenlijk zitten hierin één element en één class. (Hetzelfde geldt voor :nth-of-type en :last-of-type: die wegen even zwaar als :first-of-type).

Je hebt dan 'mijn' regel: th:first-of-type {...}
En 'jouw' regel: table.scroll th {..}
Mijn regel heeft één element minder dan de jouwe, en daardoor wordt altijd jouw regel uitgevoerd, ongeacht de volgorde van de regels. (Dit is nog redelijk simpel, het kan behoorlijk ingewikkeld worden met specificiteit.)

Als table.scroll moet blijven staan, dan moet je voor 'mijn' regel ook gewoon table.scroll zetten:

Code: Selecteer alles

table.scroll th:first-of-type, table.scroll th:nth-of-type(2) {width: 3%;}
Nu heeft deze regel twee elementen, een echte class en 'n pseudo-class (voor de telling dus twee classes) en 'wint' altijd van jouw regel table.scroll th met z'n armoedige twee elementen en één class.

Specificiteit is gewoon heel lastig om in je vingers te krijgen. Als je het eenmaal door hebt, is het vrij simpel. Maar ja, dat geldt voor vrijwel alles, als je het eenmaal weet...
In het Nederlands is er weinig over te vinden op internet, het meeste is Engelstalig. Maar toevallig heb ik er zelf 'n verhaal over geschreven:
https://www.css-voorbeelden.nl/artikele ... n-094.html
Is wel nogal lang, en voel je vooral niet verplicht het te lezen, maar het legt bovenstaande veel uitgebreider uit. Té uitgebreid, volgens sommigen, maar goed...
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Scfrollable tabel met vaste header

Bericht door amjjanssen »

Hoi,

Het wil maar niet lukken.

In bijgevoegde code hieronder heb ik nog niet al je adviezen opgevolgd maar even alleen hetgeen om de boel aan het werken te krijgen, maar helaas.
Daarna ga ik volgens jouw aanwijzingen eea optimaliseren/verbeteren.

De situatie is nu dat de header blijft staan tijdens scrollen en dat elke cel een eigen breedte heeft: prima!
Alle regels daaronder echter staan helemaal links aangeschoven, dus niet elke kolom onder zijn eigen headertje.
Dat komt waarschijnlijk omdat de css-code niet op de juiste plek staat?

Wil je zo vriendelijk zijn aan te geven waar/welke code verkeerd staat en waar die dan wel moet staan aub.
Alweer bedankt.
==============

<html>
<style type="text/css">

table.scroll {
width: 100%;
border-spacing: 0;
border: 2px solid black;
}

table.scroll th,
table.scroll td,
table.scroll tr,
table.scroll thead,
table.scroll tbody { display: block; }

th:first-of-type, th:nth-of-type(2) , th:nth-of-type(3), th:nth-of-type(4) {width: 4%;}
th:nth-of-type(5), th:nth-of-type(6), th:nth-of-type(7), th:nth-of-type(8) {width: 9%;}
th:nth-of-type(9) {width: 6%;}
th:nth-of-type(10) {width: 8%;}
th:nth-of-type(11) {width: 6%;}
th:nth-of-type(12), th:nth-of-type(13) {width: 10%;}

table.scroll thead tr {
width: 97%;
background-color: lightblue;
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}

table.scroll tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}

table.scroll tbody {
height: 700px;
overflow-y: auto;
overflow-x: hidden;
}

table.scroll tbody td,
table.scroll thead th {
float: left;
border-right: 1px solid black;
height: 35px;
border-bottom: 1px solid black;
overflow: auto;
}

thead tr th {
height: 35px;
line-height: 35px;
text-align: left;
}

tbody { border-top: 2px solid black;
border-bottom: 1px solid black;
tabel-layout: fixed;
}

tbody td:last-child, thead th:last-child {
border-right: none !important;
}
</style>

<table class="scroll">
<thead>
<tr>
<th>Nr</th>
<th>Wijzig</th>
<th>Bekijk</th>
<th>Verw</th>
<th>Wie</th>
<th>Wat</th>
<th>Waar</th>
<th>Waarom</th>
<th>OpnDatum</th>
<th>Opm OpnDat</th>
<th>ImpDatum</th>
<th>Pad</th>
<th>Beschr</th>
</tr>
</thead>
<tbody>
<?php
// Open de database.
include ('includes/database_connect.php');

// Sorteren........
$sql="SELECT * FROM TAB_FotosEnVideos ";
$result = mysqli_query($dbcnx,$sql);
if (!$result) { die('De volgende fout is opgetreden bij het lezen van tabel TAB_FotosEnVideos: ' . mysqli_error($dbcnx));};

// Bepalen lopend aantal records uit Tab_Diversen

$sql = "SELECT div_volgnr FROM TAB_Diversen";
$ok=mysqli_query($dbcnx, $sql);
if (!$ok) { die('<br>De volgende fout is opgetreden bij het lezen uit tabel TAB_Diversen: ' . mysqli_error($dbcnx)); }

$row = mysqli_fetch_array($ok);
$div_volgnr=$row['div_volgnr'];

if ($div_volgnr!=0) {

while ( $row = mysqli_fetch_array($result) ) {
echo ('<tr>');

echo ('<td>' . $row['nummer'] . '</td>');

echo ('<td><a href=wijzigen.php?id=' . $row['id'] . '>
<center><img src="images/wijzig.png" alt="Wijzigen" title="Wijzigen" ></center></a></td>');

echo ('<td><a href=show.php?pad='. $row['pad'] . '>
<center><img src=" ' . $row['pad'] . ' " width="35px" height="35px" alt="Bekijken" title="Bekijken" ></center></a></td>');

echo ('<td><a href=verwijderen.php?id=' . $row['id'] . '>
<center><img src="images/no.gif" alt="Verwijderen" title="Verwijderen" ></center></a></td>');


echo ('<td>' . $row['wie'] . '</td>');
echo ('<td>'. $row['wat'] . '</td>');
echo ('<td>' . $row['waar'] . '</td>');
echo ('<td>' . $row['waarom'] . '</td>');
echo ('<td>' . $row['opndatum']. '</td>');
echo ('<td>' . $row['opmopndat']. '</td>');
echo ('<td>' . $row['impdatum']. '</td>');
echo ('<td>' . $row['pad'] . '</td>');
echo ('<td>' . $row['beschr'] . '</td>');

echo ('</tr>');

}


} else {
echo "<br><center><font color='red'>Er zijn geen bestanden in de database opgeslagen</font></center>";
}


?>
</tr>
</tbody>

</table>


</html>
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Scfrollable tabel met vaste header

Bericht door Goeroeboeroe »

Hoi,
Even snel, anders komt het pas morgen.
Ik zie zo op het eerste oog 'n fout, die dat mogelijk zou kunnen oplossen. Als je geluk hebt, is dat het. Anders moet je het even laten weten en dan ga ik morgen uitgebreider kijken.
Je hebt weliswaar table-layout: fixed; gebruikt, maar bij het verkeerde element. Dan heeft het geen effect. En wat jij beschrijft zou (zo op het eerste oog) hierdoor kunnen komen. Zonder table-layout bepaalt namelijk de inhoud van de eerste rij met cellen de breedte van de kolommen.

In je laatste code staat table-layout:fixed; bij de css voor tbody. Daar heeft het geen effect, het moet bij table staan:

Code: Selecteer alles

table.scroll {
	width: 100%;
	border-spacing: 0;
	border: 2px solid black;
	table-layout: fixed;
}
Terzijde: als je het gaat opschonen en zo, zou ik zoveel mogelijk de css voor hetzelfde element op dezelfde plaats houden. Je hebt nu bijvoorbeeld op twee plaatsen css voor tbody. Bij 'table.scroll tbody' en bij tbody. Bovendien heeft 'table.scroll tbody' meer specificiteit dan alleen tbody (twee elementen en één class, tegenover één element). Als je bij tbody toevallig dezelfde eigenschap gebruikt als bij table.scroll tbody, gaat dat niet werken. Heb je zoveel mogelijk op alles op één plaats, dan zie je gelijk als je twee keer 'n border opgeeft of zo.
Ik ben ooit ook begonnen en ik kan je uit ervaring vertellen dat je hier soms ongelooflijk lastig op te lossen problemen van kunt krijgen, grinnik. Dan verander je iets bij de tweede tbody en dat heeft geen effect, omdat diezelfde eigenschap al bij table.scroll tbody staat, en die 'wint' dus gewoon.
Als dit 't niet oplost (of als je nog meer vragen hebt), hoor ik het wel.
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Scfrollable tabel met vaste header

Bericht door amjjanssen »

Dank voor je snelle reactie!

Nee het verplaatsen van de table-layout: fixed; heeft helaas geen effect.
Ik vind het vreemd dat de css van de kolommen (th:first-of-type, enz) over th gaan en niet over td.
De headertjes zijn goed (th) maar de rijen eronder niet (td).
Heeft dat er misschien iets mee te maken? (zei de leek). Het moet een kleinigheid zijn, want het is wel goed geweest.

Doe jij dit voor je werk (net als ik) of als hobby?

Bvd en mvg
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Scfrollable tabel met vaste header

Bericht door Goeroeboeroe »

Dan ga ik morgen even beter kijken. Als het goed is, zouden de <td>'s op deze manier even breed moeten worden als de <th>'s. Mogelijk staat er nog ergens iets in de css dat dit bijt. (Andere mogelijkheid: ik zie iets over het hoofd. Maar dat komt er dan morgen wel uit.)

Ik heb dit beroepsmatig gedaan, maar het inmiddels AOW. (Da's een van de leuke kanten van internet: jij dacht misschien met 'n jong iemand te maken te hebben, en ik denk dat jij wat jonger bent, maar misschien ben jij al 91. 't Is allemaal wat minder formeel.)

Ik werk trouwens niet dagelijks met tabellen, dus mogelijk zie ik ook iets heel simpels over het hoofd.

O, nog even 'n wilde gooi: ik zie (kun 't toch niet laten even te kijken) dat er bij je table.scroll tbody td, table.scroll thead th nu float: left; staat. Ik weet zo uit m'n hoofd niet, wat dat voor invloed heeft, maar het hoort daar niet te staan. Floaten werkt niet bij cellen, en mogelijk levert dat 'n probleem op, waardoor je lay-out wordt verstoord. Weer 'n wilde gok, maar wie weet.
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Scfrollable tabel met vaste header

Bericht door amjjanssen »

Hallo,
Als ik de float: left weghaal is de hele layout naar de knoppen, dus die heb ik weer teruggezet.
Ik denk dat de indeling van de kolommen niet op de juiste plaats staat, althans wel voor de headers maar niet voor de rijen?
Het is volgens mij iets heel simpels, maar ja............. wat?
mvg
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Scfrollable tabel met vaste header

Bericht door Goeroeboeroe »

Gedaan,

Hoi,
Ik heb het alsvolgt bekeken. Ik geef m'n stappen even op, omdat het dan beter te volgen is. En ik heb inmiddels 'n - voor mij werkende - volgorde en zo ontwikkeld. Onderaan geef ik het eindresultaat van de html en css weer.

* Bovenaan het document als eerste regel <!doctype html> gezet. Dat kan de weergave echt enorm beïnvloeden en leiden tot een (volledig) andere weergave in verschillende browsers. Als je alles zonder doctype goed krijgt en je voegt het later in, heb je kans dat je weer volledig opnieuw moet beginnen, omdat de weergave (volledig) verandert. (Dit is nog een restant uit het wilde verleden, toen browsers allemaal deden waar ze zin in hadden en je soms wel vier verschillende sites moest maken, voor elke (vesie van) een browser 'n andere. Om aan te geven dat jouw pagina zich aan de standaard houdt, gebruik je 'n doctype. Browsers houden zich dan goddank ook aan de standaard. Wat 'n ellende was dat. Sites maken is hartstikke leuk, maar vier keer vrijwel dezelfde is dodelijk saai.)

* Alle css tussen /* en */ gezet, zodat fouten in de css geen problemen opleveren. Nu heb je alleen nog de html.

* Even 'n aantal regels met <td>'s gemaakt met in elke cel het woord 'Test'.

* In de css th {outline: solid red 1px;} en td {outline: solid blue 1px;} gegeven. Nu zie je de omtrek van de th en de td, Dan zie je, dat de inhoud van de <td>' niet onder de kopjes staat. Althans: dat lijkt zo. De inhoud van een <th> wordt automatisch gecentreerd, de inhoud van een <td> niet. Dus zelfs als ze even breed zijn, staat de inhoud van een <td> meer naar links. (Dat kun je corrigeren met text-align: left; bij de <th>'s, of text-align: center; bij de <td>'s. Want mooi is dat inderdaad niet.)
Omdat een outline, anders dan een border, zelf geen ruimte inneemt, is die ideaal om de omtrek van iets te zien. Je kunt ook 'n achtergrondkleur gebruiken, werkt hetzelfde.

* Alleen de css bij table.scroll 'aangezet'. Plus daar table-layout: fixed; aan toegevoegd.

* De css voor de breedte van de <th>'s aangezet (die regels van mij, zeg maar). Wat dan gelijk opvalt: bij de door jou opgegeven breedtes zijn de woorden 'OpnDatum' en 'ImpDatum' stomweg te breed voor de <th> waar ze in staan. (Die outline of achtergrondkleur is echt heel handig om dat soort dingen te zien.) Dat kun je oplossen door er 'n spatie in te zetten, of een koppelteken. Dan komen ze op twee regels te staan. Of je moet de woorden korter maken, of de breedte groter.
Maar voor de breedte van de kolommen maakt dit verder niets uit. Standaard wordt een teveel aan tekst e.d. gewoon weergegeven, ten koste van de lay-out. Meestal wil je dat ook, want beter 'n wat rommelige lay-out dan dat er tekst gaat wegvallen. (Je kunt het ook opvangen met overflow: hidden;, dan wordt het teveel gewoon verborgen. Maar dan ben je dus 'n deel van je headers kwijt.)

* De hele regel table.scroll th, table.scroll td, table.scroll tr, table.scroll thead, table.scroll tbody { display: block;} moet eruit. Een tabel heeft een heel eigen manier van weergeven, los van block of inline. Als je alleen de css voor de tabel en de breedtes van de th aan hebt staan (zoals tot nu toe bij mij het geval is), en je zet deze regel aan, dan zie je gelijk het effect: alles komt onder elkaar te staan, niets staat meer naast elkaar. Zoals ook hoort bij display: block; maar dat is vast niet wat je wilt.
Wat je nu in feite hebt gedaan is display: table (en display: table-header-group;, en display: table-cell; en ...) weggehaald. Nu zijn het gewonen blok-elementen en die gedragen zich heel anders dan tabel-elementen.

* De weergave is nu goed. (Behalve dat die twee woorden in de header breed zijn.) Dus nu kan ik regel voor regel de css weer aan gaan zetten, om te kijken wat het probleem veroorzaakt.

* De breedte bij table.scroll thead tr kan weg. De breedte geef je op bij de tabel, en een tr is per definitie even breed als de tabel. (Als je lege ruimte wilt hebben aan het eind van de tabel, kun je 'n extra lege cel opgeven of zoiets.)
Als ik toch aan het 'zeuren' ben, en omdat ik daar ook wel lol in heb: je gebruikt twee keer width in die regel (een keer gewoon, een keer met drie voorvoegsels). Die eerste breedte heeft dan hoe dan ook geen nu, want de tweede wint. (Een validator is heel handig voor dat soort dubbelingen. Ik werkt met Visual Studio Code en die geeft bij zoiets gelijk 'n waarschuwing. Is gratis, kan ik je aanbevelen. De meeste van dat soort editors hebben een of andere ingebouwde validator.)
Goed, bij de table.scroll thead tr blijft dus alleen de achtergrondkleur staan.

* De regel bij table.scroll tr:after levert problemen op. In feite maak je daarmee een extra cel aan, maar op een ietwat vreemde manier. De browser reserveert hier ruimte voor. Maar omdat er geen breedte voor is opgegeven, levert dat al gelijk 'n verschil op tussen Firefox en Chrome.
Als je lege ruimte wilt, dan moet je gewoon 'n extra cel opgeven en die leeglaten. Maar mogelijk had je daar 'n andere bedoeling mee, die ik niet weet.
Tot nu toe, als ik al deze dingen heb gedaan, is de weergave van de cellen nog steeds even breed als die van de headers.

* table.scroll tbody. Daar heb je 'n hoogte opgegeven, maar dat werkt niet. Op <table> en <tbody> werkt height niet, omdat het geen gewone blok-elementen zijn. Dus al de css bij table.scroll tbody kan weg. In de hoogte werkt overflow-y niet, omdat je geen hoogte op kunt geven. En in de breedte heeft overflow-x hoe dan ook geen nut, want je hebt geen breedte opgegeven.
Als je de hoogte van de tabel wilt beperken, dan moet je de hele tabel in een <div> of een <section> of zoiets zetten. Aan die <div> geef je dan vervolgens een hoogte, en daar werkt overflow dan gewoon. Het effect is hetzelfde als wanneer je de tabel een hoogte zou kunnen geven. Dus iets als div {height: 700px; overflow: auto;}
overflow: hidden; zou k zeker niet gebruiken, want dan verdwijnt gewoon wat er eventueel niet past en is op geen enkele manier meer te zien.

* Komen we aan bij table.scroll tbody td, table.scroll thead th
En inderdaad, zodra ik float: left; aanzet, vliegen de cellen vrolijk naar links. Het lukte dus eigenlijk prima: je hebt gewoon opdracht gegeven om alles links te zetten, grinnik.
height: heeft geen nut. De hoogte van een cel is altijd hoog genoeg om de inhoud ervan weer te geven. (Dat komt ook weer omdat tabel-onderdelen een aparte groep zijn, naast blok- en inline-elementen en nog wat heel exotische elementen.) Als je de hoogte wilt beperken, moet je de inhoud van de cel beperken. Eventueel kun je de inhoud in een <div> of zo zetten, en die <div> weer in de cel. De hoogte van die <div> kun je wel beperken.
overflow kan dus ook weg, want dat werkt ook niet.
Overigens wordt de hoogte automatisch aangepast: als één cel hoger wordt, wordt de hele regel met cellen hoger. En ik weet niet of mensen nou gelukkiger worden, als ze in een cel moeten gaan scrollen.

* thead tr th, de volgende regel.
height werkt dus niet, maar line-height wel. Bovendien komt de inhoud dan automatisch in het midden van de hoogte te staan (dat kun je veranderen met vertical-align, als je dat wilt).
Ah, je hebt al text-align: left; gebruikt. Dat klopt ook, want nog steeds staan cellen en headers goed onder elkaar. En die headers die standaard in het midden worden neergezet, dat is echt mallotig. Gewoon foeilelijk.

* De css bij tbody. Ook weer een speciaal element. Een border werkt niet bij tbody, dus dat kan weg. (Kun je je voorstellen hoe het vroeger was, toen je alleen kon lay-outen met behulp van tabellen? Verder was er gewoon niets. Gruwelijk. En dan ook nog 'n aantal verschillende versies voor die verschillende krengen, pardon browsers.)
En table-lay-out heeft daar dus ook geen effect.
Als je een rand wilt, kan dat wel met behulp van box-shadow of outline. Met outline kun je alleen overal of nergens een rand aangeven. Met box-shadow kun je alleen aan een aantal kanten een rand geven (of overal, net wat je wilt). Jij wilt boven- en onderaan een rand, daar is een trucje voor nodig: twee keer 'n box-shadow. Dat kan gewoon. En 'n schaduw kan ook prima een gewone lijn zijn.
Maar dat komt allemaal wel, als het eenmaal in grote lijnen werkt.

* De laatste regel: tbody td:last-child, table thead th:last-child
Je gebruikt daar !important. Dat is echt een enorme ellendepukkel. Het is eigenljk bedoeld om gebruikers de css aan te laten passen. Een slechtziende kan hiermee bijvoorbeel beter contrasst forceren. (En het is handig om bij testen even snel te kijken of het dan wel werkt.) Het probleem hiermee is, zeker in grotere stylesheets: als ergens dat kreng staat, zoek je je ongans waarom iets ergens anders niet werkt. (Mocht je dat artikel van mij lezen, dat gaat dus ook over dit soort dingen.)
Als je van de selector maakt table tbody td:last-child, table thead th:last-child, werkt het gewoon. Zonder !important. Je geeft dan iets meer specificiteit aan de selectors, waardoor ze winnen van de eerdere regels die de border opgeven.
(Hetzelfde effect bereik je door table.scroll e.d. zoveel mogelijk overal weg te halen. De eerdere regels krijgen dan minder specificiteit.)

Kort samengevat: het probleem was dus de combinatie van display: block; en float: left;

Code: Selecteer alles

<!doctype html>
<html lang="nl">
<style>
	table.scroll {
		width: 100%;
		border-spacing: 0;
		border: 2px solid black;
		table-layout: fixed;
	}

	th:first-of-type, th:nth-of-type(2) , th:nth-of-type(3), th:nth-of-type(4) {width: 4%;}

	th:nth-of-type(5), th:nth-of-type(6), th:nth-of-type(7), th:nth-of-type(8) {width: 9%;}

	th:nth-of-type(9) {width: 6%;}

	th:nth-of-type(10) {width: 8%;}

	th:nth-of-type(11) {width: 6%;}

	th:nth-of-type(12), th:nth-of-type(13) {width: 10%;}

	table.scroll thead tr {background-color: lightblue;	}

	table.scroll tbody td, table.scroll thead th {
		border-right: 1px solid black;
		border-bottom: 1px solid black;
	}

	thead tr th {
		line-height: 35px;
		text-align: left;
	}

	table tbody td:last-child, table thead th:last-child {border-right: none;}
</style>
<body>
<table class="scroll">
	<thead>
		<tr>
			<th>Nr</th>
			<th>Wijzig</th>
			<th>Bekijk</th>
			<th>Verw</th>
			<th>Wie</th>
			<th>Wat</th>
			<th>Waar</th>
			<th>Waarom</th>
			<th>OpnDatum</th>
			<th>Opn OpnDat</th>
			<th>ImpDatum</th>
			<th>Pad</th>
			<th>Beschr</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
		</tr>
		<tr>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
		</tr>
		<tr>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
		</tr>
		<tr>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
			<td>test</td>
		</tr>
	</tbody>
</table>
</body>
</html>
Nog even twee andere dingen. Ik heb het zonder php getest, maar met gewone gegevens. (Feitelijk had ik veel meer <tr>'s met test gemaakt, maar die heb ik hier weggelaten.) 'n Gewone <tr> met vaste data is simpeler om te kijken of het werkt. Als je dat dan later door php gaat vervangen en het gaat dan mis, weet je dat het probleem in de php zit. Ik ben niet echt heel erg thuis in php, maar het zou kunnen dat iets in jouw php (bijvoorbeeld de <center>) problemen veroorzaakt.
Het tweede: ik heb weer even m'n eigen voorbeeld bekeken met 'n fixed header, en her en der wat kennis opgefrist over tabellen. Als je dat niet dagelijks doet, zakt dat wat weg, omdat het zo afwijkend is van alle 'normale' elementen. Een fixed header is bijzonder moeilijk, zo niet onmogelijk. Dat wil zeggen: zonder trucs.
Als je thead fixed positioneert, wordt dit als het ware uit de tabel gelicht. (Elementen die absoluut of fixed worden gepositioneerd, worden 'uit de flow' gehaald: ze gedragen zich volstrekt asociaal en letten nergens meer op.) Een fixed element wordt niet breder dan nodig is om de inhoud ervan weer te geven, dus veel smaller dan de tabel. Bovendien werkt de opgegeven breedte voor de kopjes niet meer voor de rest van de kolommen, omdat thead gewoon is losgekoppeld van de rest.
Een breedte geven aan thead werkt ook niet goed, want door de position: fixed; wordt dat gebaseerd op het venster van de browser. Je moet dan thead én table een breedte geven, en het is (vrijwel) onmogelijk om dat precies hetzelfde te krijgen. table veranderen met position: fixed; gaat ook niet, want position: fixed; (en position: absolute;} veranderen element in 'n soort blok-elementen, en het moeten juist tabel-elementen blijven.

(De reden van al deze ellende: geschiedenis. Oorspronkelijk was er alleen html en werd internet voornamelijk door wetenschappers gebruikt. Die widlen wel leuke tabellen, maar de lay-out interesseerde ze minder. Dus vandaar dat tabellen al vanaf het allereerste begin allerlei weergavemogelijkheden hadden. Later kwam daar allerlei andere elementen bij, en nog later css. En dat botste dus. Nu zouden ze tabellen ongetwijfeld heel anders ontwerpen. Veranderen kan niet, want dan zouden oudere sites niet meer goed werken.)

'n Mogelijke oplossing. Als je op internet zoekt, vind je mogelijk ook nog andere, maar deze wordt veel gebruikt. Bovendien herinnerde ik me dat ik zelf 'n voorbeeld voor 'n tabel met fixed header heb gemaakt. Bij het opnieuw bekijken daarvan schoot me die ellende met die fixed header weer te binnen. Ik heb het alsvolgt opgelost:
Plaats de hele tabel in een <div>. Die <div> geef je 'n bepaalde hoogte met overflow-y: auto;. Als de tabel hoger is dan de div, kan die gewoon worden gescrold binnen de <div>.
Maak in de tabel gewoon de <thead>, zoals je nu ook doet.
Nu kun je de tabel dus scrollen, maar de kopjes scrollen ook mee. Niet de bedoeling.
Als je nou in die buitenste <div> de kopjes kopieert en die vastzet, blijven die staan tijdens het scrollen. Je ziet dus niet de echte thead, maar 'n exacte kopie daarvan. Die vervalsing zet je over de echte thead heen, zodat je die niet ziet. Nu kun je de 'echte' thead gebruiken voor de breedte e.d., maar die zie je niet. De 'vervalsing' zie je wel, maar die verpest de tabel niet.
Dat voorbeeld van mij is te vinden op https://www.css-voorbeelden.nl/position ... n-114.html
Je kunt eventueel de code + pdr met uitleg downloaden.
Hoe ik het helemaal precies heb gedaan, weet ik trouwens niet meer, maar dat kan ik zo weer ophalen, als ik het even bekijk. Maar het werkt in grote lijnen zoals hierboven beschreven. Dat voorbeeld van mij is trouwens iets ingewikkelder, want het past zich ook aan aan smalle schermpjes, zoals op mobieltjes.
Maar als je de kopjes vast wilt zetten, zul je de oplossing ongeveer in deze richting moeten zoeken.
Nou, veel leesplezier.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Scfrollable tabel met vaste header

Bericht door Goeroeboeroe »

P.S.:
In dat voorbeeld van mij staat bovenin de mogelijkheid om de hele tabel weer te geven. Dat is eigenlijk niet meer nodig, omdat het een probleem op iOS oplosten. Inmiddels werkt scrollen ook goed op iOS, en oudere versies van iOS worden weinig gebruikt. Als ik het nu zou maken, zou ik die mogelijkheid weglaten.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Scfrollable tabel met vaste header

Bericht door Goeroeboeroe »

P.S. 2:
Dat voorbeeld is alweer wat ouder. Die fixed header kan inmiddels ook met position: sticky;. Dan scrollen de kopjes mee tot bovenaan de pagina (of de <div> of zo waar de tabel in staat), en dan blijven ze staan. Dat werkt alleen niet in oudere browsers, zoals Internet Explorer 11, maar dat lijkt me geen ramp.
In chrome (en dus Edge, Opera, ...) werkt sticky niet op de thead, maar wel op th.

Als je toevoegt th {position: sticky; top: 0;} blijven de kopjes netjes in beeld bij scrollen. Je moet dan wel achtergrondkleur en zo van de thead naar de th verplaatsen, want die thead scrollt nog gewoon mee.
Dan heb je dus helemaal geen extra <div> meer nodig, tenzij je de hoogte van de hele tabel wilt beperken, want dan moet het geheel nog steeds in 'n <div> of zoiets komen te staan.
(Eigenlijk zijn thead en tbody 'n beetje nep-elementen, ze zijn meer voor de structuur dan dat je er nou echt heel veel aan hebt.)
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Scrollable tabel met vaste header

Bericht door amjjanssen »

JAAAAAAAAAAAAA,
ik heb je tweede PS ingevoerd en nu werkt het precies zoals bedoeld! De hele tabel scrolt en de header staat (bijna) stil (schuift een pixeltje omhoog). Hartstikke goed!

Ik heb ook gelezen in je document en ik ga dat zeker weten helemaal doorlezen.
Ik heb veel van je geleerd waarvoor mijn dank! CSS is erg lastig.
Zoals je de CSS nu hebt gegroepeerd is het een stuk duidelijker.

Deze pagina wordt nu (schrik niet) opgenomen in een ouderwets <frame>....
Dat laat ik maar zo anders moet er veel teveel worden aangepast. Er ontstaan dan wel twee verticale scrollbars, waarvan ik er één hopelijk kan verwijderen.

Mvg
Plaats reactie