Tabelle mit Text smartfone-optimiert

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Simmyne
Posts: 327
Joined: Tue Oct 14, 2008 7:57 pm

Tabelle mit Text smartfone-optimiert

Post by Simmyne » Wed Apr 19, 2017 4:13 pm

Hallo allerseits,

guckt euch mal bitte diese Website an:

http://www.sowiwi.de/?Kunst/Ausstellungen

Wenn ich die Tabelle smartfone-optimiert anschaue, dann werden die Zeiträume der Ausstellungen richtig angezeigt, aber der Name der Ausstellung passt nicht mehr hin. Ich habe die Tabelle mit 100% angegeben, aber die erste, linke Spalte mit den Zeiträumen fix mit 151 px und dann auch noch white-space: nowrap; damit es keine Umbrüche gibt.

Eigentlich müsste doch die rechte Spalte auch noch hinpassen. Warum geht das nicht?

Was kann ich tun? Muss ich vielleicht die Zeiträume und die Daten in einzelne divs setzen oder geht es anders auch noch?

LG Simm
Last edited by Simmyne on Mon Jun 26, 2017 2:24 pm, edited 1 time in total.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Tabelle mit Text smartfone-optimiert

Post by cmb » Wed Apr 19, 2017 4:30 pm

Simmyne wrote:Eigentlich müsste doch die rechte Spalte auch noch hinpassen. Warum geht das nicht
Weil's eine Tabelle ist – die nimmt sich auch gerne mal mehr Platz, als ihr zusteht. Zumindest sollte aber ein Scrollbalken eingeblendet werden.
Simmyne wrote:Was kann ich tun?
Vielleicht kann man da noch irgendwie tricksen, aber letztlich ist diese Tabelle in sehr schmalen Viewports trotzdem kaum lesbar. Ludwig und Frank haben zumindest in je einem ihrer Templates eine reine CSS Lösung, die die Zellen einer Spalte untereinander anordnet (kann aber keine öffentliche Demo dafür finden). Tablesorter_XH macht das (weniger elegant) per JavaScript.
Christoph M. Becker – Plugins for CMSimple_XH

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Tabelle mit Text smartfone-optimiert

Post by lck » Wed Apr 19, 2017 7:37 pm

Simmyne wrote:Wenn ich die Tabelle smartfone-optimiert anschaue, dann werden die Zeiträume der Ausstellungen richtig angezeigt, aber der Name der Ausstellung passt nicht mehr hin. Ich habe die Tabelle mit 100% angegeben, aber die erste, linke Spalte mit den Zeiträumen fix mit 151 px und dann auch noch white-space: nowrap; damit es keine Umbrüche gibt.

Eigentlich müsste doch die rechte Spalte auch noch hinpassen. Warum geht das nicht?
Smartphone optimiert scheint ja die Tabelle überhaupt noch nicht zu sein.
Mir ist jetzt noch nicht ganz klar, ob du nun einen Scrollbalken bei der Tabelle bei kleineren Viewports haben willst, oder du die Tabelle lieber responsive haben möchtest?

Scrollbare Tabelle wäre einfach zu erreichen, indem du table nicht ein width: 100% zuweist sondern ein feste Breite, z.B. width: 700px;
(100% bedeuten nur, es wird die Breite des momentanen Viewports verwendet und das sind bei 500px Viewport nunmal nur 500px und nicht 1023px)

Willst du die Tabelle responsive, also dass sich der Name der Ausstellung unter den Zeitraum schiebt, ginge das so:

Code: Select all

@media screen and (max-width: 599px) {
td {
    display: block;
}
tr td:last-child {
    padding-bottom: 1.2em; /* um es etwas übersichtlicher zu machen */
}
} 
Um Konflikte mit anderen Tabellen und evtl. dem Backend von CMSimple_XH zu vermeiden, empfiehlt es sich der Tabelle eine eigene Klasse zu geben, Beispiel: <table class="tbl_exhibition" ...
Also dann so:

Code: Select all

@media screen and (max-width: 599px) {
.tbl_exhibition td {
    display: block;
}
.tbl_exhibition tr td:last-child {
    padding-bottom: 1.2em; /* um es etwas übersichtlicher zu machen */
}
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Tabelle mit Text smartfone-optimiert

Post by lck » Thu Apr 20, 2017 9:28 am

lck wrote:Scrollbare Tabelle wäre einfach zu erreichen, indem du table nicht ein width: 100% zuweist sondern ein feste Breite, z.B. width: 700px;
Das war nicht richtig, das aktiviert nur die horizontale Scrollleiste des body's.

Um die Tabelle horizontal scrollbar zu machen, müsste man table mit einem div umgeben, Beispiel:

Code: Select all

<div class="tbl_exhibition">
<table>
...
</table>
</div> 
stylesheet.css

Code: Select all

.tbl_exhibition {
    overflow-x: auto;
    width: 100%;
}
.tbl_exhibition table {
    min-width: 900px; /* das anpassen wie gewünscht */
} 
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

manu
Posts: 1086
Joined: Wed Jun 04, 2008 12:05 pm
Location: St. Gallen - Schweiz
Contact:

Re: Tabelle mit Text smartfone-optimiert

Post by manu » Thu Apr 20, 2017 10:05 am

Habt Ihr schon mal über eine JS Lösung nachgedacht? Für solche Tabellen, die ich auch im Editor verwalten will, verwende ich http://johnpolacek.github.io/stacktable.js/.
Zum Beispiel hier (beim Fenster verkleinern Seite aktualisieren).

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Tabelle mit Text smartfone-optimiert

Post by frase » Thu Apr 20, 2017 11:11 am

Ludwigs Vorschlag ist gut und zielführend.

Hier kommt eine Alternative, die zunächst etwas Handarbeit benötigt. Da du deine Tabelle ja nur sehr selten ändern wirst, sollte das aber gehen.

http://www.sowiwi.de/?Kunst/Ausstellungen
Edit: Adresse aktualisiert

Zunächst fügst du deiner "styles.css" folgendes hinzu - einfach am Ende anhängen:

Code: Select all

/*########### Responsive Tables ##########*/
table.responsive {
	width: 100%;
	border-spacing: 2px !important;
	border-collapse: separate;
	margin: 0 0 1em;
}
table.responsive tr {
	background-color: #eee;
}
table.responsive tr:nth-child(odd) {
	background-color: #fff;
}
table.responsive th {
	background-color: #ddd;
	padding: 0.25em 0.5em;
}
table.responsive td {
	overflow-wrap: break-word;
	padding: 0.25em 0.5em;
	vertical-align: top;
}
@media (max-width: 480px) {
table.responsive, table.responsive thead, table.responsive tbody, table.responsive th, table.responsive td, table.responsive tr {
	display: block;
	overflow: hidden;
}
table.responsive thead tr {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
table.responsive tr:nth-child(odd) td {
	border-bottom: 1px solid #aaa;
}
table.responsive td {
	display: flex;
	border-bottom: 1px solid #ccc;
}
table.responsive td:before {
	content: attr(data-label) ": ";
	flex: 0 0 5em;
	font-weight: bold;
	margin-right: 1em;
	margin-bottom: 0.25em;
}
}
Danach gehst du auf die entsprechende Seite und esetzt im Quellcode deine Tabelle mit folgendem Code:

Code: Select all

<table class="responsive">
    <tbody>
        <tr>
            <td data-label="Wann"><strong>2016</strong> - Nov./Dez.</td>
            <td data-label="Wo">KunstSaat XX (Kunstverein Hof, Galerie im Theresienstein)</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2016</strong> - 23.-25. Sept.</td>
            <td data-label="Wo">Hoftexplosion 2</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2016 </strong>- Juni/Juli</td>
            <td data-label="Wo">Kunstausstellung im Alten Landkrankenhaus, Hof</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2015 </strong>- Nov./Dez.</td>
            <td data-label="Wo">"Fauna und Flora" im Kunstverein Hof, Galerie im Theresienstein</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2015 </strong>-<strong> </strong>Oktober</td>
            <td data-label="Wo">"Farben im Leben" - Gemeinschaftsausstellung mit Gertraud Fischer und Rosario Fuhrmann im Landesamt für Umwelt in Hof</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2014 </strong>- Dezember</td>
            <td data-label="Wo">KunstSaat XVIII</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2013 </strong>- Dezember</td>
            <td data-label="Wo"><span>KunstSaat XVII </span></td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2013 </strong>- 7. Juli</td>
            <td data-label="Wo">Kunstmarkt Bayreuth</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2012 </strong>- Dezember</td>
            <td data-label="Wo">Kunstsaat XVI</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2012</strong> - 28.10.-3.11.</td>
            <td data-label="Wo">Ausstellung/Präsentation in der Buchgalerie im Altstadt-Hof, Hof</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2012</strong> - 25.3.</td>
            <td data-label="Wo">Verkaufsstand beim Hofer Frühling in der Ludwigstraße</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2012</strong> - März/April</td>
            <td data-label="Wo">Bürgerzentrum Hof</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2011</strong> - Dezember</td>
            <td data-label="Wo">Kunstsaat XV (Kunstverein Hof, Galerie im Theresienstein)</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2011</strong> - März bis Juni</td>
            <td data-label="Wo">Hospitalstiftung Gerbergasse<br>
                "Abstrakte Gedankenporträts und gegenständliche Collagen"</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2010</strong> - Dezember</td>
            <td data-label="Wo">Kunstsaat XIV (siehe auch Presse)</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2007</strong> - Juli</td>
            <td data-label="Wo">Fotoausstellung im Einkaufszentrum FRITZ, Kulmbach<br>
                "Frau in Schlaghosen vor Mann in Schlafsack – die individuelle Sicht der Dinge"</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>2006</strong> - November</td>
            <td data-label="Wo">Fotoausstellung in der Sparkasse Hof<br>
                "Frau in Schlaghosen vor Mann in Schlafsack – die individuelle Sicht der Dinge"</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>1997</strong> - Oktober</td>
            <td data-label="Wo">Fotoausstellung im Autohaus Degner Naila "Route 66"</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>1997</strong> - Mai</td>
            <td data-label="Wo">Fotoausstellung in der Sparkasse Hof "Abstraktes & Abstruses"</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>1994</strong> - Oktober</td>
            <td data-label="Wo">Fotoaussstellung im Theater Plauen "Route 66"</td>
        </tr>
        <tr>
            <td data-label="Wann"><strong>1990</strong></td>
            <td data-label="Wo">Fotoausstellung im ehem. Café Atemnot "Unter Brücken"</td>
        </tr>
    </tbody>
</table> 
Wenn du jetzt eine Viewportbreite von 480px unterschreitest, wird die Tabelle anders dargestellt.
Den Wert kannst du natürlich ändern.
"Wann" und "Wo" kannst du auch anpassen.

Gib mal durch, ob's passt.
Last edited by frase on Mon Jun 26, 2017 3:41 pm, edited 1 time in total.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Tabelle mit Text smartfone-optimiert

Post by cmb » Thu Apr 20, 2017 12:23 pm

Danke, Ludwig und Frank, für die CSS-Lösungen. Wisst Ihr, wie es da mit der Browserkompatibilität aussieht (ich vermute in der Praxis recht gut)? Dann wären sie einer JS-Lösung vermutlich vorzuziehen.
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Tabelle mit Text smartfone-optimiert

Post by frase » Thu Apr 20, 2017 12:29 pm

cmb wrote:Wisst Ihr, wie es da mit der Browserkompatibilität aussieht (ich vermute in der Praxis recht gut)? Dann wären sie einer JS-Lösung vermutlich vorzuziehen.
Denke ich auch.
Meine Lösung sollte in allen "modernen" Browsern laufen. Ludwigs mit Sicherheit auch.
Es ist eben immer vom Einzelfall abhängig. Wie sieht die Tabelle aus? Braucht man einen Header ... usw.
Bei colspan wird das auch alles schwierig.

Simmyne
Posts: 327
Joined: Tue Oct 14, 2008 7:57 pm

Re: Tabelle mit Text smartfone-optimiert

Post by Simmyne » Thu Apr 20, 2017 12:32 pm

Hallo frase,

es klappt, aber mich stört das "Wann?" und "Wo?", wenn das Wort nicht wäre, würde der Zeitraum schön reinpassen (ohne dass es ihn unschön trennt) und der Titel der Ausstellung müsste nicht erst in der Mitte des Viewport anfangen.

Spaßeshalber habe ich mal die eine Zelle mit nowrap versehen.

Code: Select all

<td data-label="Wann" style="white-space: nowrap;"><strong>2016</strong> - 23.-25. Sept.</td>
Aber wie gesagt, wenn das "Wann?" nicht wäre, würde es schön hinpassen.

http://www.sowiwi.de/?Kunst/Ausstellungen

Kann man das irgendwie umgehen? Wäre toll.
Danke jedenfalls soweit.
Last edited by Simmyne on Mon Jun 26, 2017 2:25 pm, edited 1 time in total.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Tabelle mit Text smartfone-optimiert

Post by frase » Thu Apr 20, 2017 12:40 pm

Simmyne wrote:Aber wie gesagt, wenn das "Wann?" nicht wäre, würde es schön hinpassen.
Tja, wie man's macht, ...

Bei deiner speziellen Tabelle geht es vielleich viel einfacher.

Entferne alle data-label wieder. :(
Im neuen Style kommentiere aus oder lösche den letzten Abschnitt:

Code: Select all

/*table.responsive td:before {
	content: attr(data-label) ": ";
	flex: 0 0 5em;
	font-weight: bold;
	margin-right: 1em;
	margin-bottom: 0.25em;
}*/
Dann stehen die Spalten eben einfach ohne nähere Bezeichnung untereinander.
Und - da deine Tabelle gar keinen Header hat - könnte die erste Zeile grau beginnen.
Tausche #fff und #eee einfach aus.

Post Reply