Tabelle mit Leselupe

[colaholiker]

Hallo allerseits,

Ich möchte ein Projekt beginnen mit einer dynamischen Tabelle (1-20 Zeilen), deren mittlere Zeile beim scrollen:
- immer am gleichen Ort bleibt
- in der Größe hervorgehoben wird incl. der 2 angrenzenden Zeilen
- 'erstmal' umrandet ist (später: 'Glaseffekt: Lupe')
- auf die Hauptzeile möchte ich mit js zugreifen können.
Der Zugriff erfolgt dann durch 2 Eingabefelder (Bild).
Die Tabelle, Eingabefelder uam. befinden sich jeweils in <div>'s.

Am Ende soll es aussehen, als ob auf der Tabelle eine quadratische 'Leselupe' liegt, die ggf. über 3 Zeilen geht (wegen des 'dynamischen' Größen- Übergangs).
Stretch im Schriftbild möglich???

Es soll senkrecht gescrollt werden (ohne Scrollbalken, per Mausrad). Wenn <3 (bzw.5) Einträge existieren, will ich leere Dummyzeilen einsetzen, um das Bild zu erhalten und den 'echten' Eintrag in die Mitte zu bekommen.

Zum Verständnis hab ich mal eine Tabelle rein in HTML aufgebaut. Die Änderung der Größe erfolgt hier nur durch 'font-size'.
Das 'Umranden' der relevanten Zeile hat hier nicht ganz geklappt (css-Reste gibts auch) und der Scrollbalken ist noch sichtbar, aber es ist ja nur zum Andeuten wie ich es machen möchte.

Leider finde ich zu 'html table magnifier' so garnichts im Netz. Die üblichen Lupenprojekte beziehen sich meist auf Bilder.
Falls jemand Seiten mit Beispielen für Tabellen kennt (oder bessere Suchtexte) würde mir das evtl. auch helfen, insbesondere für das 'Lupenbild' später.

* Der erste Schritt, den ich hier zunächst klären möchte ist, die mittlere Zeile stabil zu halten um dort (und je eine Zeile darüber/darunter) mein Styling zu setzen.

Ist es für diese Stabilität besser, den Zeilentext durch die Tabelle zu schieben, oder die Tabelle 'oldschool' zu scrollen und die mittleren Zeilen 'dynamisch' zu formatieren?

TIA,
c.

 

[Oliver77]

Vielleicht geht:

.selector {
transition:transform 0.4s;   
}
.selector:hover {
transform:scale(1.2);   
}

 

[colaholiker]

Hi Oliver77,
Was Du mit 'transition' meinst hatte ich mir ungefähr mit 'opaque' vorgestellt. Ist aber ein guter Ansatz fürs Styling. Hovern werde ich wohl vermeiden wie ich das bisher sehe.

Ja, mit 'opaque' einen Kasten, Background: grey als Glas-Stab (Lupe) über die vergrößerten Zeilen zu legen. Mit Aufhellung in der Mitte oder so. Das kommt aber als Letztes.

Nach etwas grübeln bin ich jetzt drauf gekommen, pro Zeile eine extra Tabelle zu erzeugen und die Daten mit js reinzuschreiben. Das macht das css wesentlich einfacher, und die mittlere 'Zeile' ist nicht vom scrollen betroffen (echtes Scrollen entfällt ja!).

Problem wird werden, das Durchreichen der Daten (js: Schleife?) mit dem Mausrad hinzubekommen. Sowas soll aber machbar sein, beim Scrollen in meiner letzten Tabelle geht das Mausrad auch, aber automatisch.

 

[colaholiker]

Jetzt wo ich mal so eine Lupe im Netz gesucht habe glaube ich, daß sich kaum jemand mein Ziel vorstellen kann. Hab nur das hier gefunden.
Also wirklich: ein 'Balken'. Solche Lupe kenne ich aus Glas gebaut.

Hab einzelne Tabellen mit Fake-Text gebaut und etwas gestylt:

Die Spalten passe ich morgen an.
Es hat sich gezeigt, daß ich für die Vergrößerung sehr schmale Schrift finden muß.
Das Lupenbild, leider kein Foto im Netz dazu,sollte die Schrift auch nur in die Vertikale strecken.
'font-stretch: condensed;' probiert: bringt nur wenig.
Soch. Feierabend heute...