Een hoofdtabel splitsen in 2 tabellen geeft onverwachte problemen

Status
Niet open voor verdere reacties.
L

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Een bestaande tabel werkt perfect - toont op scherm en printer de opgegevraagde gegevens van 3 groepen, (groep A, B en C) na (=onder) elkaar binnen dezelfde tabelstructuur.
(prog=HTML+ASP / database=Access)

Als de tabel bij afdruk nu evenwel groter is dan één blad, kan zie ik op de vervolgpagina enkel de hoofding (titels) van de Thead. Dat is OK zolang de vervolgpagina een overgang is van rijen uit groep A.
Valt de paginaovergang evenwel in de rijen van groep B, komt bovenaan het vervolgblad ook dezelfde Thead (titel) als groep A enz.

Bedoeling is om de HTML tabel te splitsen in 3 afzonderlijke tabellen met telkens een passende Thead voor elke groep - én waarvan de globale tabelstructuur identiek blijft ogen als oorspronkelijk.

Als test deed ik één splitsing in 2 tabellen. Het resultaat van deze (m.i. eenvoudige) ingreep is evenwel niet goed.
Na invoeging van </table> en <table> in de splitsing, komt de 2de tabel (op het scherm) evenwel aansluitend rechts naast de 1ste, in plaats van onder de 1ste, zoals het oorspronkelijk was en ook nu gewenst is.

Ik vermoed dat ik hier mogelijks iets essentieels over het hoofd zie.
Wat ik graag zou vernemen : met welke elementen moet ik absoluut rekening houden, die -in deze context- nogal eens over het hoofd gezien worden ?
Dank voor tips.
 
Om te voorkomen dat tabellen naast elkaar komen kan je ze 100% breed maken. Dan zijn ze passend op scherm en printer.
Code: 
table, thead, tbody, tr {
  width: 100%;
}
table, th, td {
  box-sizing: border-box;
}
table {
  max-width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
  overflow: hidden;
}

Gebruik nergens margin, alleen bij table kan je eventueel margin-top en/of margin-bottom gebruiken.
Als je meer lucht om tekst wilt hebben kan je padding gebruiken.
 
Laatst bewerkt:
Als de gesplitste tabellen (A en B) uitgesmeerd worden over het volledig scherm (100%) komt de lay-out minder geslaagd over. De strakke kolombreedte van de oorspronkelijke tabel is verdwenen : de kolommen in de beide tabellen A en B worden variabel en onstabiel.
Ik heb dit probleem voorlopig 'opgelost' door in de A en B-tabel geen breedte ad 100% op te geven maar de kolombreedte van de eenheidstabel te behouden (totale breedte is ca 680px -= minder dan 50%). Door een bijkomende blanco-tabel als buffer tussen de A en B-tabel te 'schuiven' komen de tabellen A en B toch onder elkaar.
Ik besef dat dit problemen kan geven als de tabel A groter wordt want dan moet ik in mijn blanco tabel manueel rijen toevoegen.

Bestaat een mogelijkheid om de met de aangereikte CSS-codes toch de oorspronkelijke lay-out op ca 700px te behouden en waarbij ook mijn voorlopige blanco-tabel kan afgevoerd worden.
Dank voor tips.
 
Laatst bewerkt:
Als de tabel een width: 100% heeft dan moet de optelsom van alle kolombreedtes hierop zijn aangepast, ook in procenten.
Bijvoorbeeld bij 3 kolommen
Code: 
table tr th:nth-child(1), table tr td:nth-child(1) { width: 45% }
table tr th:nth-child(2), table tr td:nth-child(2) { width: 25% }
table tr th:nth-child(3), table tr td:nth-child(3) { width: 30% }

Gebruik het volgende om te voorkomen dat celinhoud buiten de tabelbreedte terecht komt.
Code: 
table, th, td {
  box-sizing: border-box;
}
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan