Problem mit Breite einer Tabellenspalte

[Linuchs]

Moin,

ich habe eine 5-spaltige Tabelle, die beim Druck über mehrere A4-Seiten geht. Pro td möchte ich nur zwei Zeilen, wenn der Inhalt länger wird, soll abgeschnitten werden:

table.positionen td {
  padding-top: .2em;
  padding-bottom: .2em;
  font-size: 11pt;
  white-space: nowrap;
  overflow-x: hidden;
}

Das funktioniert nicht wie gewünscht. Spalte 4 wird so breit wie möglich, Spalte 5 wird unterdrückt, wenn man das Fenster auf A4-Breite verkleinert oder die Druckvorschau ansieht:

Also gebe ich Spalte 4 eine maximale Breite:

table.positionen tr > td:nth-of-type(4) { width: 32%; max-width: 32%; background:#ff0;}

background nur zur Kontrolle. Die Breiten-Begrenzung wirkt überhaupt nicht, warum nicht?

Gruß, Linuchs

[Auge]

Hallo

Moin,

ich habe eine 5-spaltige Tabelle, die beim Druck über mehrere A4-Seiten geht. Pro td möchte ich nur zwei Zeilen, wenn der Inhalt länger wird, soll abgeschnitten werden

Das funktioniert nicht wie gewünscht. Spalte 4 wird so breit wie möglich, Spalte 5 wird unterdrückt, wenn man das Fenster auf A4-Breite verkleinert oder die Druckvorschau ansieht:

Also gebe ich Spalte 4 eine maximale Breite:

table.positionen tr > td:nth-of-type(4) { width: 32%; max-width: 32%; background:#ff0;}

background nur zur Kontrolle. Die Breiten-Begrenzung wirkt überhaupt nicht, warum nicht?

Wenn du mit Prozentangaben hantierst, muss bekannt sein, worauf sich die Prozentangabe bezieht. Die Frage lautet also „32% wovon?“.

Entweder muss ein Vorfahrenelement eine absolut zu berechnende Breite haben (in vw, em, rem oder wenn es gar nicht anders geht inpx ^[1]) oder es muss, wie es früher™️ üblich war, die Breite für html oder body angegeben sein (zum Beispiel mit 100% (oder moderner und absolut berechenbar 100vw) für den gesamten Viewport).

Tschö, Auge

---

1. [edit]da du drucken willst, geht natürlich genausogut auch pt[/edit] ↩︎

[MudGuard]

Hi,

Wenn du mit Prozentangaben hantierst, muss bekannt sein, worauf sich die Prozentangabe bezieht. Die Frage lautet also „32% wovon?“.

Entweder muss ein Vorfahrenelement eine absolut zu berechnende Breite haben (in vw, em, rem oder wenn es gar nicht anders geht inpx [^1]) oder es muss, wie es früher™️ üblich war, die Breite für html oder body angegeben sein (zum Beispiel mit 100% (oder moderner und absolut berechenbar 100vw) für den gesamten Viewport).

ist das wirklich so? Bei Höhenangaben ist das m.W. so - aber bei der Breite nicht - da haben doch block-Elemente (zu denen auch Table gehört) per Default die Breite, mit der sie das Elternelement ausfüllen.

Oder täusche ich mich da?

cu,
Andreas a/k/a MudGuard

[Der Martin]

Hallo,

Wenn du mit Prozentangaben hantierst, muss bekannt sein, worauf sich die Prozentangabe bezieht. Die Frage lautet also „32% wovon?“.

32% von "so breit wie nötig". ;-)

ist das wirklich so? Bei Höhenangaben ist das m.W. so - aber bei der Breite nicht - da haben doch block-Elemente (zu denen auch Table gehört) per Default die Breite, mit der sie das Elternelement ausfüllen.

Aber gerade Tabellen haben die Eigenart, sich zu verbreitern, wenn der Inhalt es erfordert, und dadurch auch ihr Elternelement (z.B. body) zu dehnen, wenn dieses seinerseits keine feste oder maximale Breite hat. Das führt dann zum Horizontal-Scrollen.

Oder täusche ich mich da?

Ich glaube ja - aber ganz sicher weiß ich es auch nicht.

Einen schönen Tag noch
 Martin

[Rolf B]

Ich hab vorhin ein bisschen experimentiert, fand die Tabelle extrem widerspenstig, konnte keine Lösung anbieten und hab mich darum 'rausgehalten.

Klingt nach einem Problem für Experten-Frontender.

In mir hat kurz das display:grid Lämpchen geblinkt, aber ob man damit besser bedient ist, weiß ich nicht. Das Streifenmuster der Rows könnte damit etwas lästiger werden, und wenn man für die altehrwürdige remso-Anwendung alterwürdige Nutzer hat, die altehrwürdige und senile Browser wie den IE aufbrauchen, ist Grid auch nicht ganz so trivial. Vor allem, weil sich der IE neuerdings nicht mehr so gern starten lässt und einen mit aller Gewalt zum EDGE schicken will. Altlasten testen wird so kniffliger.

Rolf

[MudGuard]

Hi,

In mir hat kurz das display:grid Lämpchen geblinkt, aber ob man damit besser bedient ist, weiß ich nicht.

Für tabellarische Daten wäre die table m.E. schon das Richtige …

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

In mir hat kurz das display:grid Lämpchen geblinkt, aber ob man damit besser bedient ist, weiß ich nicht.

Für tabellarische Daten wäre die table m.E. schon das Richtige …

Das Eine schließt ja das Andere nicht aus. ♦️♥️♠️♣️ (nicht, dass das Beispiel nun besonders sinvoll wäre; es soll lediglich die Möglichkeit aufzeigen)

🖖 Живіть довго і процвітайте

[Linuchs]

Hatte das vorher schon, dann vergeblich rumprobiert und die Tabelle nun wieder umschachtelt, Problem aber unverändert:

header, .main, footer, .body {
  padding: 5px;
  max-width: 210mm;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;   /* 2019-07-18 wg. QRC */
}
.main {
  overflow: hidden;
}

<div class=main>
  <table>
...
  </table>
</div>

Sinn der Wegnahme war, dass in einem breiten Viewport in diesem Fall (markierte Tabellenzeilen) unnötig Rand verschwendet wird und dem Inhalt fehlt. Im Normalfall macht die Verengung Sinn, da ich nach 50cm kleiner Schrift ein Problem habe, die nächste Zeile wiederzufinden.

Ich formuliere die Frage mal anders:

Wie kann ich den Viewport (50cm) voll nutzen, aber die Tabelle, zumindest den linken Teil in td auch auf kleinen Viewports sehen?

Wundere mich selbst, dass das ein Problem ist. Irgendwas habe ich übersehen oder unterlassen oder CSS/HTML-Regeln haben sich geändert.

[Rolf B]

Hallo Linuchs,

Wie kann ich den Viewport (50cm) voll nutzen, aber die Tabelle, zumindest den linken Teil in td auch auf kleinen Viewports sehen?

Hm. Wirklich breitenlimitieren kann man eine Tabellenspalte scheinbar nur, wenn der Inhalt noch in ein div gepackt wird und man sowohl dem td als auch dem div eine Breite gibt.

Wenn man dann den td, die in der Breite limitiert werden sollen, eine Klasse gibt und eine Media Query verwendet (hinter den übrigen td Styles!)

@media (max-width: 40em) {
  body { background: #ddd; } /* nur als Marker, dass die Query aktiv wurde */
  table.positionen td.limit-width  { width: 10em; }
  table.positionen td.limit-width div { width: 10em; }
 
}

passiert zumindest etwas. Ob es das ist, was Du willst, ist eine andere Frage.

Dein tr > sollte überflüssig sein, ein td muss eh immer in einem tr stehen. Wenn Du dagegen Tabellen geschachtelt hast, muss man die Selektoren präziser machen dann aber mit table > tbody > tr > td... (yup, tbody, auch wenn Du keinen im HTML notiert hast, ist er trotzdem da)

Rolf

[Linuchs]

Hallo Rolf,

Dein tr > sollte überflüssig sein, ein td muss eh immer in einem tr stehen.

Aha, ich dachte, td:nth-of-type(1) wäre nur das erste td der Tabelle?

Ja, man könnte alle möglichen Varianten testen, aber ich bin froh, wenn eine (beliebige) Lösung funktioniert.

[Rolf B]

Hallo Linuchs,

Aha, ich dachte, td:nth-of-type(1) wäre nur das erste td der Tabelle?

Jetzt hast Du mich für einen Moment stutzen lassen, und ich habe es nochmal ausprobiert. Man weiß ja nie...

Die :nth-irgendwas Pseudoklassen sind immer in Bezug auf das Elternelement des damit klassifizierten Elements zu sehen. Und das ist die Row.

Rolf