SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Dienstlicherseits pflege ich eine Webseite, in der eine Liste verfügbarer PDFs als HTML Table angezeigt wird. Durch einen Klick auf einen Link in der Zeile kann man das PDF in einem neuen Tab öffnen. Die Webseite an sich ist trivial, der Hirnschmalz steckt in dem virtuellen Druckerservice, durch den diverse Anwendungen unseres Großrechners ihre Ausgaben erstellen können, ohne zu merken, dass das gar kein Drucker ist.

Die Anwendung ist Legacy-Zeug von 2005 und obwohl ich im Laufe der Zeit vieles neu geschrieben habe, steckt noch viel alter Kram im CSS. Der "Anzeigen" Link füllt die Zeile, aber nur dadurch, dass da eine fixe Höhe zugewiesen wird. Das passt nicht immer, manche Zeilen enthalten Zusatzinfos in einer anderen Spalte und sind höher.

Also, neues Ziel: Mach den Link automagisch so hoch wie die Zeile ist. Das mit JavaScript zu tun ist sicher möglich, aber bestimmt unnötig. Also habe ich guten Mutes dies hier geschrieben:

<td>
   <a href="pdf.aspx?id=...">&nbsp;
      <span class="visually-hidden">Dokument anzeigen</span>
   </a>
</td>

.documents a {
   display: block;
   height: 100%;
   background: url(pdf.png) no-repeat center,#8F8;

Der grüne Zusatzhintergrund ist für diesen Artikel hereingekommen, zur Visualisierung des a-Elements.

Und das klappt natürlich - nicht!

Das Icon ist oben und nicht in der Mitte, weil aus anderen Gründen vertical-align:top für die Zellen gesetzt ist. Und man sieht überhaupt nur deshalb irgendwas davon, weil der visuell versteckte span ebenfalls neu ist und vorher nur ein   im Link stand, den ich vergessen hatte zu löschen.

Offenbar ist die Zelle also nicht so hoch wie die Zeile, sonst würde das a Element ja höher sein, oder? Das table-Layoutmodell ist ja sowieso der beste Kopfschmerzgenerator. Also habe ich hinzugefügt:

.documents td {
   height: 100%;
}

Und der Effekt war natürlich - NULL.

Nachdem ich die Suchmaschine meines geringsten Misstrauens zu Rate gezogen hatte, erweist es sich, dass es gar nicht funktionieren kann. Ganz logisch und selbstverständlich: Eine Höhe von 100% braucht eine Bezugshöhe. Mein table-Element hatte aber keine height-Attribut und damit war die Höhe auto, was in einer Tabellenzelle als Bezugshöhe für Prozentangaben untauglich ist.

Einige Lösungen im Web empfehlen height: 1px für die Tabelle - was tatsächlich funktioniert, aber aus meiner Sicht ein Geschmäckle hat.

Besser und expressiver ist hingegen

table.documents {
   height: fit-content;
}

was Chromia seit 2015 können (Chromium 46), Webkits seit 2017 (Safari 11) und Geckos seit 2021 (Firefox 94).

Für Chromia ist die Angabe height:100%; für die Zelle unnötig, aber Firefox braucht sie, damit es funktioniert.

Zusammengefasst:

table.documents {
   height: fit-content;
}

.documents td {
   height: 100%;
}

.documents a {
   display: block;
   height: 100%;
   background: url(pdf.png) no-repeat center, #8F8;
}

Und dann geht's.

-

Das Dankeschön geht an Kaperstone bei StackOverflow.

Rolf