1 html Seite mit 1 Tabelle responsiv anpassen

[Tastenplayer]

Hallo

Gibt es nirgendwo im Netz eine Seite die für Dummies erklärt wie man eine einzelne html Seite mit Tabelle responsiv hinbekommt?

Mein Forenradio ist jetzt endlich nicht mehr als PDF sondern als eine html Seite erstellt. Lädt zig mal schneller, jedoch logisch nicht responsiv.
Zig Stunden googeln und nichts gefunden, dass mir den Durchblick verschafft
[ externes Bild ]

War doch extra im Small Talk. Wenn es jetzt hier her verschoben wurde - muss ich noch code einstellen

[canonknipser]

Versuch es doch mal mit css-Tabellen
https://wiki.selfhtml.org/wiki/CSS/Eige ... ay/Tabelle
Beispiel:
https://github.com/canonknipser/viewexi ... ml#L10-L17
und
https://github.com/canonknipser/viewexi ... ss#L15-L51

[gn#36]

Alternativ bindest du gleich ein CSS Framework dafür ein wie z.B. bootstrap o.ä. die meisten bieten dir auch eine ähnliche Möglichkeit, bei der du einfach CSS Klassen angeben kannst abhängig von der gewünschten Breite bei verschiedenen Displayformaten. Folgendes würde für kleine und größere Displays (ab ca. Tablet Größe) dann ein vierspaltiges Layout definieren (die genauen Bezeichnungen hängen natürlich vom Framework ab):

Code: Alles auswählen

<div class="row">
    <div class="col-sm-3">A</div>
    <div class="col-sm-3">B</div>
    <div class="col-sm-3">C</div>
    <div class="col-sm-3">D</div>
</div>

Alles was kleiner ist bekommt automatisch ein einspaltiges Layout (d.h. die Spalten werden untereinander dargestellt).

Wenn es auf kleinen Displays zwei und auf größeren vierspaltig sein soll dann könntest du es z.B. ungefähr so auszeichnen:

Code: Alles auswählen

<div class="row">
    <div class="col-md-3 col-sm-6">A</div>
    <div class="col-md-3 col-sm-6">B</div>
    <div class="col-md-3 col-sm-6">C</div>
    <div class="col-md-3 col-sm-6">D</div>
</div>

Um den Rest kümmert sich dann das Framework (d.h. ganz kleine Displays bekommen z.B. in diesem Fall wieder ein einspaltiges Layout).

[Tastenplayer]

Danke schau mir das alles in den nächsten Tagen an.

In meinem Fall müsste ich wahrscheinlich den neusten Wysiwig Webbuilder anschaffen - denn sonst scheint es nicht zu gehen, da eben im Wyisywig Web Builder erstellt. Aber evt. klappt es trotzdem.

Anleitung für totale Dummies - lediglich für den Radio von 1 html Seite wäre am Einfachsten:
1. Schönere PDF erstellen
2. Hier einladen https://www.idrsolutions.com/online-pdf ... converter/
3. Responsive html Seite ist fertig, halt mit weissem Hintergrund oben kann gewählt werden + und minus(wer gaaanz kleines Mobilegerät hat benötigt keine Lupe - wird eh den Radio nicht benutzen )
4. Download Zip
Hier das Resultat: http://www.fotos-hochladen.net/uploads/ ... kygja6.png
http://www.fotos-hochladen.net/uploads/ ... 5ody23.png
http://www.fotos-hochladen.net/uploads/ ... thpbrw.png
http://www.fotos-hochladen.net/uploads/ ... p53tzw.png Hintergrund und Headerfarben angepasst.
http://www.fotos-hochladen.net/uploads/ ... wk6u0z.png weitere Funktionen

@canonknipser
Super vielen Dank!

Die Anleitung von gn#36 erscheint nicht sehr kompliziert - mal sehen, Danke für die Mühe!

[Tastenplayer]

Tabelle ist wirklich nicht sehr einfach, versuchs weiter.
Die Anleitung oben mit der konvertierten pdf funktioniert jedoch in jedem Mobilengerät und sieht nicht schlecht aus!

Im iPhone 4 Landscape kommt der Theme toggle über die Seitenzahl, funktioniert aber. In der normalen Ansicht sieht es normal aus.
Im iPhone 5 Landscape funktioniert der Theme toggle nicht! In der normalen Ansicht schon.

Habe mal versucht mehrere pdf Seiten mit diesem Tool in html Seiten umzuwandeln - hat auch super geklappt. Die Sidebar wurde in jedem Mobilgerät angezeigt!
Eine coole Sache mit wenig Aufwand erstellt(dauerte nicht viel länger als mit dem ehemaligen RadioMod )

[Tastenplayer]

Leider noch nicht viel weiter gekommen. Allerdings hatte ich überhaupt nicht daran gedacht, den Radio in Pages zu erstellen.
Da geht es eindeutig einfacher mit der Unterteilung und ist auch noch responsiv!

Musste nur das noch zusätzlich in .pages-content einfügen

Code: Alles auswählen

width: 100%;	
	column-count: 4;
	column-rule-color: #333333;
	column-rule-width: 5px;
	column-rule-style: solid;	

Hier nochmals das Bild aus meiner Pages Backround Anfrage [ externes Bild ]
Irgendwann klappt es bestimmt noch mit der selber erstellten responsiven html Seite mit Tabelle!

[Melmac]

Wie wäre es damit: Responsive Data Tables ?

[gn#36]

phpBB selbst löst das in meinen Augen ziemlich gut. Um zu sehen wie es funktioniert kannst du dir z.B. meine Hookup Erweiterung installieren und ganz viele Datumseinträge hinzufügen, so dass die Tabelle schön breit wird. Wenn du die Ansicht klein machst schrumpft die Tabelle mit und sortiert sich um. In Melmacs Link bräuchtest du einen eigenen CSS Header für jede spezifische Tabelle, wenn ich das richtig gesehen habe, phpBB hat das auch ohne hingekriegt.

[Tastenplayer]

Wie wäre es damit: Responsive Data Tables ?

Danke Melmac, da war ich vor 30 Minuten grad gelandet. Erschien mir kompliziert

@ gn#36
Gut schau mir das mal an - allerdings steht da für 3.1.x - funktioniert das in 3.2.0?

[gn#36]

Die Version für 3.2.0 kannst du dir von Github laden - ist noch im Test, wird aber denke ich nicht mehr groß geändert. Aber es geht dir ja dachte ich nur um das Tabellenhandling, dafür könntest du dir ja lokal ein 3.1.x installieren.