Tabelle mit Text smartfone-optimiert
Tabelle mit Text smartfone-optimiert
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
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.
Re: Tabelle mit Text smartfone-optimiert
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:Eigentlich müsste doch die rechte Spalte auch noch hinpassen. Warum geht das nicht
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.Simmyne wrote:Was kann ich tun?
Christoph M. Becker – Plugins for CMSimple_XH
Re: Tabelle mit Text smartfone-optimiert
Smartphone optimiert scheint ja die Tabelle überhaupt noch nicht zu sein.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?
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 */
}
}
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
Re: Tabelle mit Text smartfone-optimiert
Das war nicht richtig, das aktiviert nur die horizontale Scrollleiste des body's.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;
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>
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
Re: Tabelle mit Text smartfone-optimiert
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).
Zum Beispiel hier (beim Fenster verkleinern Seite aktualisieren).
Re: Tabelle mit Text smartfone-optimiert
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:
Danach gehst du auf die entsprechende Seite und esetzt im Quellcode deine Tabelle mit folgendem Code:
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.
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;
}
}
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>
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.
Re: Tabelle mit Text smartfone-optimiert
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
Re: Tabelle mit Text smartfone-optimiert
Denke ich auch.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.
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.
Re: Tabelle mit Text smartfone-optimiert
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.
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.
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>
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.
Re: Tabelle mit Text smartfone-optimiert
Tja, wie man's macht, ...Simmyne wrote:Aber wie gesagt, wenn das "Wann?" nicht wäre, würde es schön hinpassen.
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;
}*/
Und - da deine Tabelle gar keinen Header hat - könnte die erste Zeile grau beginnen.
Tausche #fff und #eee einfach aus.