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.