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:

Sempervivum

Erfahrenes Mitglied
Wie so häufig ist auch hier die falsche Verwendung von float die Ursache des Problems: Mit white-space: nowrap; warst Du schon auf dem richtigen Weg aber durch das float:left; für die Tabellen hast Du es wieder ausgehebelt. Deaktiviere ich es, werden die Tabellen zuverlässig nebeneinander angeordnet und man kann scrollen:
Code:
table {
    display: inline-table;
    /* float: left; */
    border: 1px solid black;
    border-collapse: collapse;
    Overflow-x: scroll;
    Overflow-y: scroll;
}