Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[MartinSU]

Hallo,
ich wollte eine kleine Tabelle in VIS darstellen 4 Zeilen, und 10 Werten / Zeile.
Also nahm ich ein "basic - note", schrieb den Text rein und stellte den Font auf "Courier New, Courier, monospace"
Der Text sollte etwa so je Zeile aussehen: "123,4 123,4 123,4 123,4 123,4 123,4"
Den Zeichensatz "Courier New" wähle ich, weil dieser für jedes Zeichen die gleiche Breite hat.
Aber der Text im "basic - note" ist nicht in "monospace"
Erzeuge ich pro Zeile Strings z.B. "123,4...123,4...123,4...123,4...123,4...123,4" (3 Punkte anstatt 3 Leerzeichen), ist die Tabelle sauber formatiert mit dem Zeichensatz "Courier New" wie ich ihn kenne, alle Werte genau übereinander.
Den gleichen Effekt habe ich mit "basic-string", "basic-string unescaped", "basic-HTML".
Da ich jetzt das Internet schon 2 Stunden durchsucht habe und immer noch keine Lösung habe, stellt sich die Frage:
Was mache ich falsch bzw. was muss ich ändern ?

[Homoran]

@martinsu sagte in Kleine Tabelle mit Monospace Font klappt nicht:

Was mache ich falsch bzw. was muss ich ändern ?

ist die Kategorie beabsichtigt?

[MartinSU]

@homoran
nein, natürlich nicht, wie bin ich denn darein gerutschet?
wie kann das verschieben?

[Homoran]

@martinsu sagte in Kleine Tabelle mit Monospace Font klappt nicht:

wie kann das verschieben?

gar nicht!

Aber du kannst noch mehr Fakten liefern.
Was und wie sowie womit hast du es versucht
vis oder vis-2?
....

[Codierknecht]

@martinsu
nimm doch einfach ein <pre>

[MartinSU]

@codierknecht
ich möchte einfach eine kleine Tabelle in VIS (1) anzeigen, z.B.:

** Jan  Feb Mrz Apr
111,1  112,2  113,3 114,4
211,1  212,2  213,3 214,4
311,1  312,2  313,3 314,4

(natürlich sauber formatiert)
Jede Zeile in einem String erzeugt und jeweils in ein "basic-string" oder "basic-string unescaped" oder "basic-HTML" kopiert.
Nur wenn ich die Leerzeichen durch Punkte ersetze, ist die Tabelle sauber formatiert.

[Homoran]

@martinsu sagte in Kleine Tabelle mit Monospace Font klappt nicht:

natürlich sauber formatiert)

ich hab"s versucht ;-)

[MartinSU]

@homoran
:+1:
und wie geht das in VIS? :grinning:

[Homoran]

@martinsu ich hab v8n Tabellenbau keine Ahnung, hab mir das bisher aus hundert Widgers gebastelt

aber im Prinzip müsdte man das mit HTML Kenntnissen hinbekommen.
Vielleicht kann dir da @Codierknecht weiterhelfen

[MartinSU]

@homoran
@codierknecht
das wollte ich gerade vermeiden, wenn man da etwas verschieben möchte.....
Ich habe auch mal "basic-Table" und "Materialdesign-Table" versucht, bin aber gescheitert.
Kennt sich damit jemand aus?

[MartinP]

@martinsu Ich habe eine Tabelle einfach mit dem HTML Widget und dem üblichen HTML Code gebaut...

[MartinSU]

@martinp
hast Du ein Beispiel?
Auch wie Du den Inhalt erzeugt hast?

[MartinP]

@martinsu

Wenn man auf den Stift klickt, kann man das HTML editieren:

<table>
  <tr><th>Volume</th><th>F&uuml;llstand %</th></tr>
  <tr><td>Proxmox</td><td>{linux-control.0.proxmox.BootDisk}</td></tr>
  <tr><td>data</td><td>{linux-control.0.proxmox.Intenso-Data}</td></tr>
  <tr><td>backup</td><td>{linux-control.0.proxmox.Intenso-Backup}</td></tr>
  <tr><td>unterhaltung</td><td>{linux-control.0.proxmox.Intenso-Unterhaltung}</td></tr>
  <tr><td>docker</td><td>{linux-control.0.docker.docker-volume}</td></tr>
  <tr><td>iobroker</td><td>{linux-control.0.iobroker.iobroker-volume}</td></tr>
  <tr><td>frigate</td><td>{linux-control.0.frigate.frigate-volume}</td></tr>
  <tr><td>deb-test</td><td>{linux-control.0.debian.debian-test-volume}</td></tr>
</table>

Für den Rahmen kann man da noch basteln, entweder Stylesheet oder in die Table

ich habe es im CSS Reiter des Widgets gemacht. Border-collapse hat nicht funktioniert. Bleiben Doppellinien...

.table, td, th{
  border: 1px solid black;
  border-collapse: collapse;
}

[Codierknecht]

Ich würde das per Script in ein JSON klöppeln und in Vis eine Json-Table verwenden.

[MartinSU]

@martinp
ich habe Deine Tabelle als Grundlage genommen und meine Werte eingesetzt, noch nicht komplett.

Wie kann man die Werte rechtsbündig machen?
Und wie kann man eine Nachkommastelle erzwingen (auch wenn sie "0" ist)
Hast Du da noch einen Tipp?

[MartinSU]

@codierknecht
JSON habe ich auch schon probiert, aber die Zähne daran ausgebissen....
Hast Du ein Beispiel?

[MartinP]

@martinsu sagte in Kleine Tabelle mit Monospace Font klappt nicht:

Hast Du da noch einen Tipp?

https://wiki.selfhtml.org/wiki/Tabellen/Gestaltung_mit_CSS

Text-align

[Codierknecht]

@martinsu sagte in Kleine Tabelle mit Monospace Font klappt nicht:

Hast Du ein Beispiel?

[
  {
    "**": 1,
    "Jan": 2.34,
    "Feb": 3
  },{
    "**": 5,
    "Jan": 6,
    "Feb": 7
  }
]

Stylen kann man das dann per CSS

[MartinP]

@codierknecht Die hatte ich auch am Wickel... Da klappten aber Bindings in Tabellenelemente irgendwie nicht....

Statische Tabellen sind ja langweilig....

[Codierknecht]

@martinp sagte in Kleine Tabelle mit Monospace Font klappt nicht:

Da klappten aber Bindings in Tabellenelemente irgendwie nicht

Funzt wunderbar :grin:

[
  {
    "**": 1,
    "Jan": {0_userdata.0.Test.differenz},
    "Feb": 3
  },{
    "**": 5,
    "Jan": 6,
    "Feb": 7
  }
]