Kalender responsive erstellen

1 webuser

Hallo,
ich habe einen Kalender (3Monate nebeneinander und 5 Monate untereinander). Als CSS wird dieses verwendet:

table.fb { background-color: #F7F7E7; border-color: #808080; }
table.fb td { color: #000000; border-color: #808080; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
table.fb td.s { font-weight: bold; white-space: nowrap; border-bottom: 1px solid black;}
table.slimBorder {border-bottom: 1px solid black;}

Ein Auszug aus dem html code:

//Die Tabellen sind angeordnet in einem 3*5 Raster mit dem aktuellen Monat links oben.
echo "<table border='0' cellpadding='0' cellspacing='10'><tr><td valign='top'>";

for ($table_number = 1; $table_number <= 15; $table_number++) {

if ($table_number > 1)
{
//Wenn es nicht die erste Tabelle ist, wird hier der Monat um eins erhöht.
$datum = date('Y-n-j',strtotime("+1 month",strtotime($datum)));
}

echo '<table class="fb" border="1" cellpadding="1" cellspacing="0" rules=none >'."\n";
echo '<tr><td colspan="7" class="s">'.$monat_deutsch[date('n',strtotime($datum))]." ".date('Y',strtotime($datum)).'</td></tr>';
echo '<tr><td>Mo</td><td>Di</td><td>Mi</td><td>Do</td><td>Fr</td><td class="s">Sa</td><td class="s">So</td></tr>';

Der ist leider nicht responsive. Kann man den ändern?

Gruß
webuser

Man kann Tabellenzellen in einer kleineren Bildschirmgröße untereinander anzeigen, und die jeweils erste Zellen mit einer anderen Farbe einfärben, um anzudeuten, wo eine neue Tabellenreihe beginnt. So habe ich das in diesem Forum gelöst, wie z.B. auf der Startseite - du kannst ja mal schauen, ob das für dich eine Option ist.

Die betreffenden Anweisungen finden sich in der Datei https://joergs-forum.de/compress.php?f=responsive-1.css im Block @media (max-width:599px) { ... }.

Ausblenden der Kopfzeile und Anordnen der Tabellenzellen untereinander:

th {
display:none;
}
td {
display:block;
}

Einfärben der ersten Zelle:

td:first-child {
background-color:#eff6fc;
}

Da die Kopfzeile ausgeblendet ist, wird der jeweilige Titel vorne in die Zelle eingefügt:

td.col-datum:before {
content:'Letzter Beitrag: '
}

1 webuser

2 Jörg Kruse

Beitrag schreiben (als Gast)