Responsive Tabellen

Einsatz auf eigene Gefahr! Kein kostenloser Support!

Responsive Tabellen

Laden Sie die Datei ce_cto-table-responsive.html5.zip herunter und entpacken Sie diese.

Kopieren Sie das angepasste Template ce_table-responsive.html5 in den Ordner templates/customized.

Erstellen Sie eine Tabelle mit horizontaler Kopfzeile und soweit gewünscht mit Fußzeile.

Im Bereich Template-Einstellungen wählen Sie das angepasste Template ce_table-responsive.html5 aus.

Tragen Sie die nachfolgenden CSS-Anweisungen in die Datei responsive-max-width-767px ein. Z.B. am Anfang der Datei.

Oder Sie nutzen die die Datei custom.css aus dem Ordner /files/theme/css/ und übertragen das CSS in den Bereich für Smartphones (max-width:767).

Download:

ce_table-responsive.html5.zip (1,2 KiB) 

/*!
 * Nur Farben und Abstände anpassen!
 */
@media only screen and (max-width:767px) {
.ce_table.responsive thead,
.ce_table.responsive tfoot {
    display:none;
}

.ce_table.responsive tr {
    display:block;
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:2px solid #f00;
}

.ce_table.responsive td {
    display:block;
    padding-right:0;
    padding-left:0;
}

.ce_table.responsive [class*="col_"]::before {
    display:block;
    padding-bottom:.5em;
    border-bottom:1px solid #e3e3e3;
    color:#f00;
    content: attr(data-title);
}
}

Zurück