Tabeltitel afdrukken op volgende pagina lukt niet

Status
Niet open voor verdere reacties.
L

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Bij gebruik van twee tabellen (A en B onder elkaar) wordt tabel A (titel gecodeerd met HTML <tr> en <td>) mét titel volledig afgedrukt op 1 pagina en wordt op dezelfde pagina gevolgd door tabel B.
De titel (van tabel B) is opgebouwd) met HTML code <theat> <tr> en <th> maar wordt niet afgedrukt op de volgende pagina (samen met het vervolg van tabel B). De splitsing van de tabel B gebeurt onderaan pagina 1 en bovenaan pagina 2 m.i. wel OK met de nodige spatieruimte.

De titel van één lange tabel laten afdrukken op de volgende pagina('s) is tot nu geen probleem met de code van B hierboven.

Hoe krijg ik (enkel) de titel van tabel B ook bovenaan pagina 2 ?

Dank voor tips.
 
Laat je HTML-code eens zien? Je mag het ook op JSfiddle delen.
 
Geen idee of je hier iets aan hebt. Het is standaard css om sommige elementen netter te printen.
Code: 
<style>
@media print {
  tr, img, blockquote {
    page-break-inside: avoid;
  }
}
</style>

In jouw geval zou je table erbij kunnen zetten in deze regel.
Code: 
table, tr, img, blockquote {
 
Deze valabele info was nog te vermelden (in bericht #1) : tabel A en B vormen één grote tabel A+B waarin titel A en titel B telkens 'subtabellen' zijn.

In code ziet dat er ca zo uit :
Code: 
<table>
  <tr>
    <td>...</td><td>...</td> titel van 'tabel A'
    (records)
  </tr>

  <thead>
    <tr>
      <th>...</th><th>...</th> titel van 'tabel B' die ook op de volgende afgedrukte pagina zou moeten verschijnen
      (records)
    </tr>
  </thead>
</table>

Beide subtabellen heb ik noodgedwongen in 1 tabel ondergebracht omdat ze anders op het scherm naast elkaar verschijnen (table width : 680)
Als beide subtabellen in 2 tabellen onder elkaar zouden staan dan is dit titelprobleem m.i. vrij snel geklaard.

Dank voor tips.

mod: <th> verandert in <tr>
 
Laatst bewerkt door een moderator:
Afgezien van een oplossing begrijp ik niet helemaal wat de reden is dat alle records in dezelfde table row staan als de titel.
Waarschijnlijk allemaal eigen <tr> ?

Even een aanname...
Het is 1 tabel met 2 secties, de 1e zonder thead en tbody, en de 2e sectie zonder tbody.
is het dan iets als dit.
Code: 
<table>

  <tr><td>TITEL A</td><td>TITEL A</td></tr>

  <tr><td>record A</td><td>record A</td></tr>
  <tr><td>record A</td><td>record A</td></tr>
  records enz.

  <thead>
    <tr><th>HEADER B</th><th>HEADER B</th></tr>
  </thead>
  
  <tr><td>record B</td><td>record B</td></tr>
  <tr><td>record B</td><td>record B</td></tr>
  records enz.
  
</table>

Vraag: kan je de html wijzigen of zit je hieraan vast?
 
Laatst bewerkt:
Nog een aanvulling op de vorige post.
Een browser zet, als een tbody ontbreekt, deze zelf erbij. De html in de vorige post wordt dan automatisch
Code: 
<table>

  <tbody>
    <tr><td>TITEL A</td><td>TITEL A</td></tr>
    <tr><td>record A</td><td>record A</td></tr>
    <tr><td>record A</td><td>record A</td></tr>
  </tbody>
    
  <thead>
    <tr><th>HEADER B</th><th>HEADER B</th></tr>
  </thead>
  
  <tbody>
    <tr><td>record B</td><td>record B</td></tr>
    <tr><td>record B</td><td>record B</td></tr>
  </tbody>

</table>

Met als vreemd resultaat

table.jpg

Iets om rekening mee te houden :)
 
Laatst bewerkt:
M.b.t. #5
- alle records (uiteraard) in een eigen <tr>
- voorgestelde code = ca mijn code behalve <thead> verplaatst onder de header volgens onderstaande post #6 voor zover dit effect heeft
- zit ik vast aan de html - begrijp ik dat html zou vervangen worden door een ander code ? => alles kan geprobeerd worden als het beter / best werkt !
M.b.t. #6
- dat 'vreemd' resultaat heb ik al gezien - nu blijkbaar niet meer (na allerlei probeersels waarvan ik niet exact meer weet wat de laatste 'toetsaanslag' nu was)

Bovenstaande resulteert dus in een perfect voorblad (met de titel en de header) en een perfect uitgelijnde keerzijde (vervolg van de tabel B) evenwel (nog) zonder de header bovenaan.
 
Laatst bewerkt:
De syntax & werking van een tabel
Code: 
<table>
  <thead> <!-- tr rijen --> </thead>
  <tbody> <!-- tr rijen --> </tbody>
  <tfoot> <!-- tr rijen --> </tfoot>
</table>

  • de volgorde in de tabel mag niet worden omgegooid.
  • tbody is verplicht ; thead en tfoot mag je weglaten.
  • alleen thead wordt bij printen telkens bovenaan elke pagina gezet.
  • je mag in elke tr (maakt niet uit waar) een th gebruiken.
  • een th verandert niets aan de werking, je kan een th een ander kleurtje ofzo geven.

Het komt erop neer dat je 2 gescheiden tabellen nodig hebt. Op die manier kan je de thead van de 2e tabel op elke pagina bovenaan krijgen.

Code: 
<table>
  <thead> <!--titel tabel 1 --> </thead>
  <tbody> <!-- records --> </tbody>
</table>

<table>
  <thead> <!--titel tabel 2 --> </thead>
  <tbody> <!-- records --> </tbody>
</table>
 
Laatst bewerkt:
Dank bron voor de voorafgaande verduidelijking.
Ik vermoedde die conclusie (cfr. in #4 : 'Als beide subtabellen in 2 tabellen onder elkaar zouden staan dan is dit titelprobleem m.i. vrij snel geklaard')
maar hoopte toch dat dit op de een of andere manier wel kon in 1 tabel - niet dus.

Mijn initieel probleem blijft : als ik 2 tabellen maak (width 680) dan komen ze naast elkaar te staan op het scherm.
Als hiervoor een oplossing zou zijn ... dan komt het toch nog goed ;-)
Dank voor tips.
 
Laatst bewerkt:
Ik weet niet hoe de css van de tabel is. Je zou dit kunnen proberen.
Code: 
<table style="float:none; display:block;">
 
css ingevoerd in tabel 2 - verschijnt nog steeds naast de eerste.
Getest met width:680px; in css - bij grotere width wel onder elkaar maar dan verkleint de afdruk (print) te veel.

In W3Schools info gezien omtrent side-by-side tables maar niets over tabellen onder elkaar (= normale situatie ? toch niet hier ;-)
 
Getest met width:680px; in css - bij grotere width wel onder elkaar maar dan verkleint de afdruk (print) te veel.
Klik om te vergroten...
Omdat ik je layout niet ken is het lastig aangeven wat te doen.

Zelf gebruik ik dit "als basis" voor tabellen. Bij het gebruik van % zoekt elk type printer de breedte zelf uit
Code: 
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
table, table * {
  box-sizing: border-box; /* belangrijk */
}
th, td {
  vertical-align: top;
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
th {
  font-weight: bold;
}

Om alles goed weer te geven moet de % consequent overal in de tabel worden gebruikt.
Als voorbeeld 2 kolommen met een verhouding 1 : 2
Code: 
td:nth-child(1) {
  width: 33.333%;
}
td:nth-child(2) {
  width: 66.666%;
}
 
Laatst bewerkt:
Zoals eerder reeds aangehaald ben ik niet zo bedreven in css-tabellen - bijgevolg geprobeerd met de voorbeeldcode sub #12.
Een tabel afdrukken met een logo bovenaan lukt wel (logo en tabel worden ca even breed afgedrukt) maar het afbeeldingsblokje bovenaan is op het scherm niet even breed als de tabel met een breedte van 100%.
De effectieve width gebruiken was dan de oplossing maar -zoals ik ervaar- weer niet het ideale ideaal voor variabele schermen.
Is een dergelijke lay-out hindernis oplosbaar met css ?
 
Is een dergelijke lay-out hindernis oplosbaar met css ?
Klik om te vergroten...
Jazeker wel, dat heet een "responsive" ontwerp en wordt gemaakt m.b.v. css. Dit wil zeggen dat vormgeving, teksten, tabellen, afbeeldingen, video's enzovoort zich automatisch aanpassen aan het apparaat. Welk apparaat maakt niet uit, het kan ook een beamer, tv of printer zijn.

resp.jpg

Zelf gebruik ik hiervoor Bootstrap , daar zijn heel veel voorbeelden van te vinden en het is goed gedocumenteerd. Je zal nu denk ik niet helemaal opnieuw beginnen maar het is iets om over na te denken.

Zo werkt het. De stylesheet van Bootstrap zet je in de head sectie.
Code: 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

en dit is dan een responsive tabel.
Code: 
<div class="table-responsive">
  <table class="table">
    <tbody>
      <tr><td>1</td><td>Appel</td></tr>
      <tr><td>2</td><td>Kiwi</td></tr>
      <tr><td>3</td><td>Druif</td></tr>
    </tbody>
  </table>
</div>

Je kan op simpele manier andere vormgeving eraan geven, klik hier voor voorbeelden

Behalve tabellen kan je ook heel veel andere dingen maken voor je pagina.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan