Tabellen/Style Problem

[TCr82]

Hi,

ich würde mir gerne in den Blocks verschiedene Werte in einer Tabelle anzeigen lassen.

Dazu habe ich folgenden Code definiert:

     
    <div class="block"> 
        <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true"> 
            <div data-role="collapsible" data-collapsed="false" > 
                <h3>Flur 1</h3> 
                <table width=100%> 
                    <tr align=left height=60> 
                        <td align=left style="padding-left: 10px;">Beleuchtung</td> 
                        <td align=left style="padding-left: 10px;"> 
                            {{ basic.flip('flur1_licht', 'FlurLicht1schalten','An','Aus') }} 
                        </td> 
                        <td align=left style="padding-left: 10px;">Leistung</td> 
                        <td align=left style="padding-left: 10px;"> 
                            <div style="width: 140px;"> 
                                <span id="flur-flur1_stromwert_mA2W">- Watt</span> ({{ basic.float('flur1_stromwert', 'FlurLicht1Stromwert', 'mA') }}) 
                            </div> 
                        </td> 
                    </tr> 
                    <tr align=left height=60> 
                        <td align=left style="padding-left: 10px;">Betriebsstunden</td> 
                        <td align=left style="padding-left: 10px;"> 
                            {{ basic.value('flur1_betriebsstunden', 'FlurLicht1Betriebsstunden') }} 
                        </td> 
                        <td align=left style="padding-left: 10px;">Verbrauch</td> 
                        <td align=left style="padding-left: 10px;"> 
                            {{ basic.value('flur1_wirkarbeit', 'FlurLicht1Wh', 'Wh') }} 
                        </td> 
                    </tr> 
                </table> 
            </div> 
        </div> 
    </div>

Habe mal zwei Bildschirmfotos dazu beigepackt... vom PC und vom Handy.

im Browser sieht das alles OK aus, nur eben nicht auf dem Handy.

Gibt es schon vordefinierte CSS Klassen welche ich irgendwie für divs verwenden kann um das ähnlich aussehen zu lassen?

Toll wäre wenn z.B. am PC dann zwei Spalten anzeigen und auf dem Handy wo weniger Platz ist alles untereinander wie die Blocks selbst ja auch dargestellt werden.

Gruß,
Thomas

[Apollo]

Also:

Generell verwenden wir ein repsonsive Design, was bedeutet, das sich die Optik an das Endgerät anpasst. Von daher würde ich möglichst wenig "absolute" Maßangaben verwenden (sonst kann der Clientbrowser ja nichts mehr anpassen).

Deshalb gelten folgende Regelen, damit das gut aussieht:

1.
Tabellen nur als Gerüst verwenden (ohne Breiten und Höhenangaben).

2.
Einfache Strukturen aufbauen, die mit Ausrichtungen innerhalb der Zelle arbeiten

3.
Geringe Breiten ermöglichen, einfach den Browser mal klein schieben, sodaß in der Titleleiste nur noch die 4 Icons und das smartVISU Logo (ohne Platz dazwischen) sichtbar ist. Damit hast du ca. 300 Pixel Breite zur Verfügung, was auf allen gängigen Geräten perfekt passt.

4.
Falls du dennoch mehr Spalten haben willst, die dann umschalten in eine Ansicht untereinander kannst du Reflow Tabellen verwenden:
Table: Reflow - jQuery Mobile Demos

Gruss

PS: Als Lösung für dein konkretes Problem: Mach doch mal eine Tabelle für jede Zeile, dann hat der Client schon mehr Möglichkeiten. Die Breite deiner Texte in deinem Beispiel ist wahrscheinlich zu breit.

[TCr82]

also 4. wäre meine präferierte Lösung... aber leider ist dass table-reflow nicht auf mein Problem anwendbar, da ich keine Daten mit festen Headern pro Spalte ausgeben möchte.

Es muss ja nicht unbedingt mit Table gelöst sein, divs oder so wären ja auch ok...

Eine Spalte pro Datensatz sieht halt in der Breiten Darstellung nicht ganz so doll aus.... irgendwie so leer...

Design war noch nie so mein Ding....

[Apollo]

Schau doch mal hier:

SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Allgemeine Elemente für Textbereiche

[TCr82]

naja, das hilft mir nicht wirklich weiter... aber ich probiere mal noch ein wenig... falls aber doch jemand eine Idee hat, wie man von dem zwei-Spaltigen Datensatz (bestehend aus wieder zwei Spalten) auf einen ein-Spaltigen Datensatz bei kleiner Auflösung umswitchen kann, immer her damit ^^

[TCr82]

Ok, ich habs jetzt etwas anders gelöst, so schaut es auf allen Geräten gut aus:

    <div class="block"> 
        <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true"> 
            <div data-role="collapsible" data-collapsed="false" > 
                <h3>Flur 1</h3> 
                <table class="myStyle"> 
                    <tr> 
                        <td class="myStyle">
                            <h1 class="myStyle">Beleuchtung</h1>
                            <div class="myStyle myvCenter">{{ basic.flip('flur1_licht', 'FlurLicht1schalten','An','Aus') }}</div>
                        </td> 
                        <td class="myStyle">
                            <h1 class="myStyle">Leistung</h1> 
                            <div class="myStyle myvCenter"> 
                                <span id="licht-flur1_stromwert_mA2W">- Watt</span> ({{ basic.float('flur1_stromwert', 'FlurLicht1Stromwert', 'mA') }}) 
                            </div> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="myStyle">
                            <h1 class="myStyle">Betriebsstunden</h1> 
                            <div class="myStyle myvCenter">{{ basic.value('flur1_betriebsstunden', 'FlurLicht1Betriebsstunden') }}</div> 
                        </td> 
                        <td class="myStyle">
                            <h1 class="myStyle">Verbrauch</h1> 
                            <div class="myStyle myvCenter">{{ basic.value('flur1_wirkarbeit', 'FlurLicht1Wh', 'Wh') }}</div> 
                        </td> 
                    </tr> 
                </table> 
            </div> 
        </div> 
    </div>

und das CSS dazu:

table.myStyle {
    width: 100%;
    margin: 0;
}
td.myStyle {
    padding-left: 4px;
    text-align: left;
    vertical-align: top;
}
h1.myStyle {
    font-size: 10pt;
}
div.myStyle {
    padding-left: 8px;
    height: 35px;
}
div.myvCenter {
    display: table-cell;
    vertical-align: middle;
}