Formartierung: Table Border

[KHome]

Moin,

ich habe SmartVISU 2.9.2 sowie Chrome auf einem RaspberryPi mit 7"-(Touch)-Screen als Haus-Visu laufen...

Für eine Übersicht welche Fenster geöffnet sind und ob durch ein geöffnetes Fenster der Raum erwärmt wird, habe ich mir folgendes zusammen gestrickt.
Ich verwende die

<div class="hide"

und zusätzlich HTML-Tables, damit das Symbol (Temperatur max, blinkend als GIF oder Herz) rechtsbündig angezeigt wird.
alarm_table_balken.png
Nun meine Fragen an Euch:
--> Wie bekomme ich innerhalb einer Reihe den grauen Trennstreifen weg, bzw auch rot eingefärt?

Mein HTML-Quelltext für diese Seite:

{% extends "overview/base.html" %}

{% block content %}
<div class="html" data-title="Fenster">

{{ status.collapse('kuefenLR', 'egvisu.kueche.fenster.beide_zu',1) }}
<div class="hide" data-bind="kuefenLR">
<table style="width: 100%;text-align: left">
<tr style="background-color:#ff0000">
<th>
{{ basic.symbol('kuefenL1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - links', 'fts_window_2w_open_l.svg', 1, '') }}
{{ basic.symbol('kuefenR1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - rechts', 'fts_window_2w_open_r.svg', 2, '') }}
{{ basic.symbol('kuefenLR1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - beide', 'fts_window_2w_open_lr.svg', 0, '') }}
</th>
<th style="background-color:#ff0000;text-align: right">
{{ basic.symbol('kuealarmh1', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','Fe nster zu!+', '', 1, '') }}
{{ basic.symbol('kuealarmk1', 'egvisu.kueche.temp_fenster_offen_alarm_heizt',' ->kühlt: ' , '', 0, '') }}

{{ basic.print('kuealarmc', 'egvisu.kueche.temp_delta_innen_aussen', '%01,1f °C') }}

{{ basic.symbol('kuealarmk2', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','' , 'jquery_heart', 0, '') }}
{{ basic.symbol('kuealarmh2', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','', 'temp_temperature_max.gif', 1, '') }}
</th>

</tr>
</table> </div>

{{ status.collapse('hwrfen', 'egvisu.hwr.fenster.einzel_zu',1) }}
<div class="hide" data-bind="hwrfen">
<table style="width: 100%;text-align: left">
<tr style="background-color:#ff0000">
<th> {{ basic.stateswitch('hwrfen1', 'egvisu.hwr.fenster.einzel_zu', 'icon', ['1', '0'], ['fts_window_1w_open.svg', 'fts_window_1w_open.svg'], '', ['icon0', 'icon0']) }} EG: HWR-Fenster offen</th>
<th style="background-color:#ff0000;text-align: right">
{{ basic.symbol('hwralarmh1', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','Fenst er zu!+', '', 1, '') }}
{{ basic.symbol('hwralarmk1', 'egvisu.hwr.temp_fenster_offen_alarm_heizt',' ->kühlt: ' , '', 0, '') }}

{{ basic.print('hwralarmc', 'egvisu.hwr.temp_delta_innen_aussen', '%01,1f °C') }}

{{ basic.symbol('hwralarmk2', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','' , 'jquery_heart', 0, '') }}
{{ basic.symbol('hwralarmh2', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','', 'temp_temperature_max.gif', 1, '') }}
</th>
</tr>
</table> </div>

{% endblock %}

Zur Vollständigkeit habe ich die base.html und root.html ebenso als Anhang hinzugefügt.
Versucht habe ich bereit direkt "Styles" in <tr> bzw. <th> einzufügen.

--> Kennt ihr noch eine andere Methode, um zum Ziel zu kommen?

[wvhn]

Moin,

wenn es Dir nur um die table borders geht, kannst Du diese in CSS oder im html-Elemnt per style="..." festlegen. Siehe hier.

Man kann solche Tabellen alternativ auch über Spans machen, die man per CSS formatiert. Beispiel ist das device-smallshut Widget mit den entsprechenden CSS-Klassen in base.css.

Hilfreich ist die Entwickler-Konsole im Browser (mit F12 aufrufen). Dort kannst Du direkt an den CSS-Eigenschaften spielen und siehst die Ergebnisse live, ohne die Seite jedes Mal neu laden zu müssen.

Für die Fenster kannst Du aus dem Example3.graphic mal die windows-Widgets ausprobieren.

Gruß Wolfram

[KHome]

wvhn: Besten Dank für die vielen hilfreichen Tipps!

Ich habe es nun mit -Spans- gelöst, da der "Umbau" mit wenig Aufwand verbunden war:
hwr_screen.png

{% extends "overview/base.html" %}
{% block content %}
<div class="html" data-title="Fenster">
{{ status.collapse('kuefenLR', 'egvisu.kueche.fenster.beide_zu',1) }}
<div class="hide" data-bind="kuefenLR">
<table style="width: 100%">
<tr>
<th style="background-color:#ff0000">
<span style="display: block; float:left">
{{ basic.symbol('kuefenL1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - links', 'fts_window_2w_open_l.svg', 1, '') }}
{{ basic.symbol('kuefenR1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - rechts', 'fts_window_2w_open_r.svg', 2, '') }}
{{ basic.symbol('kuefenLR1', 'egvisu.kueche.fenster', 'EG: Küchenfenster offen - beide', 'fts_window_2w_open_lr.svg', 0, '') }}
</span>
<span style="display: block; float:right">
{{ basic.symbol('kuealarmh1', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','Fenster zu!+', '', 1, '') }}
{{ basic.symbol('kuealarmk1', 'egvisu.kueche.temp_fenster_offen_alarm_heizt',' ->kühlt: ' , '', 0, '') }}
{{ basic.print('kuealarmc', 'egvisu.kueche.temp_delta_innen_aussen', '%01,1f °C') }}
{{ basic.symbol('kuealarmk2', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','' , 'jquery_heart', 0, '') }}
{{ basic.symbol('kuealarmh2', 'egvisu.kueche.temp_fenster_offen_alarm_heizt','', 'temp_temperature_max.gif', 1, '') }}
</span>
</th>
</tr>
</table>
</div>


{{ status.collapse('hwrfen', 'egvisu.hwr.fenster.einzel_zu',1) }}
<div class="hide" data-bind="hwrfen">
<table style="width: 100%">
<tr >
<th style="background-color:#ff0000">
<span style="display: block; float:left">
{{ basic.stateswitch('hwrfen1', 'egvisu.hwr.fenster.einzel_zu', 'icon', ['1', '0'], ['fts_window_1w_open.svg', 'fts_window_1w_open.svg'], '', ['icon0', 'icon0']) }}
EG: HWR-Fenster offen
</span>
<span style="display: block; float:right">
{{ basic.symbol('hwralarmh1', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','Fenster zu!+', '', 1, '') }}
{{ basic.symbol('hwralarmk1', 'egvisu.hwr.temp_fenster_offen_alarm_heizt',' ->kühlt: ' , '', 0, '') }}
{{ basic.print('hwralarmc', 'egvisu.hwr.temp_delta_innen_aussen', '%01,1f °C') }}
{{ basic.symbol('hwralarmk2', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','' , 'jquery_heart', 0, '') }}
{{ basic.symbol('hwralarmh2', 'egvisu.hwr.temp_fenster_offen_alarm_heizt','', 'temp_temperature_max.gif', 1, '') }}
</span>
</th>
</tr>
</table>
</div>


</div> {% endblock %}

Nun ist richtig-kühles Lüften für alle im Haus transparent. - SOLVED
Nur besser als eine Visu wäre direkt sichtbare LEDs an den Fenstergriffen