Mehrere Tabellen nebeneinander, scrollbar

fhammers

Grünschnabel
Ich versuche eine Art Termin Kalender zu erstellen, der mir mehrere Wochen auf einmal anzeigen kann und die entsprechenden Termine.

Hierfür sollen die einzelnen Wochen als einzelne Tabelle dargestellt werden und mehrere Tabellen nebeneinander, was auch (fast) funktioniert.

Denn sobald die Anzahl der Tabellen die Bildschirmbreite übersteigt werden die folgenden Tabellen unten angereiht.

Hat jemand eine Idee wie sich das Problem lösen lässt? (habe um es nicht ganz unübersichtlich zu machen und 20x die Tabellen reinzukopieren, den php-code drin gelassen.)

HTML:
<html>
<head>
<title>Terminkalender</title>
<style type="text/css">
body {
    white-space: nowrap;
    Overflow-x:scroll;
    Overflow-y:scroll;
}

table {
    display: inline-table;
    float:left;
    border: 1px solid black;
    border-collapse: collapse;
    Overflow-x:scroll;
    Overflow-y:scroll;
}

td {
    display: inline-table;
    float:left;
    border: 1px solid black;
    border-collapse: collapse;
    Overflow-x:scroll;
    Overflow-y:scroll;
}
</style>
</head>

<body>
<?php for ($i = 1; $i <= 20; $i++) { ?>
<table>
  <tr>
    <td><b>Mo</b></td>
    <td><b>Di</b></td>
    <td><b>Mi</b></td>
    <td><b>Do</b></td>
    <td><b>Fr</b></td>
    <td><b>Sa</b></td>
    <td><b>So</b></td>
  </tr>
  <tr>
    <td><b>Mo</b></td>
    <td><b>Di</b></td>
    <td><b>Mi</b></td>
    <td><b>Do</b></td>
    <td><b>Fr</b></td>
    <td><b>Sa</b></td>
    <td><b>So</b></td>
  </tr>
</table>
<?php
}
?>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator: