Verschachtelte Table automatisch horizontal scrollbar

[Rene J.]

Hallo liebe Selfhtml-Forengemeinde!

Ich hoffe ihr könnt mir in einem Anliegen weiterhelfen, bei dem ich nicht so recht weiter weiß. Hintergrund ist folgender: Auf einem System, welches automatisch HTML Seiten generiert wird eine Tabelle ausgegeben. Die Struktur dieser Seite ist vorgegeben und kann leider nicht von mir geändert werden. Das einzige worauf ich Zugriff habe, ist die CSS Datei für diese Seite.

Nun möchte ich gern, dass diese Tabelle automatisch auf Geräten mit kleiner Bildschirmbreite horizontal scrollbar wird. Also der Fließtext drumherum passt seine Breite ja automatisch an, aber die Tabelle soll dann nicht dafür sorgen, dass der gesamte Seiteninhalt nach rechts scrollbar wird. Ich hoffe diese Aussage ist verständlich.

Mit einer normalen Tabelle funktioniert das ja auch folgende Weise (ggf. eingebunden mit Media-Query): .table3 { overflow-x: auto; display: block; }

Wenn ich das aber in den vorhandenen Aufbau einbaue, dann funktioniert das nicht mehr. Die Struktur ist folgende:

<table class="table1" style="width:100%">
	<tbody>
		<tr>
			<td>
			<table class="table2" style="width:100%">
				<tbody>
					<tr>
						<td>Heading Text</td>
					</tr>
					<tr>
						<table class="table3" width="100%">
							<tbody>
								<tr><th></th><th></th><th></th></tr>
										..............
								<tr><td></td><td></td><td></td></tr>
							</tbody>
						</table>
					</tr>
					<tr>
						<td>Footer Text</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</tbody>
</table>

Mein Ziel ist also, dass table3 horizontal srollbar wird und die übergeordneten Tabellen maximal Bildschirmbreite haben. Leider sprengt die table3 immer die Bildschirmbreite.

Jemand eine Idee wie sich das lösen lässt? Vielen Dank bereits im Voraus!

Rene