pascalwilfer
Neues Mitglied
Hallo, mit dem folgenden Code habe ich 3 Tabellen erzeugt, die nebeneinander erscheinen sollen:
Wenn ich das Browserfenster nun schmaler ziehe, rutscht logischerweise die 3. (also rechte) Tabelle in die Zeile unter die anderen beiden Tabellen. Allerdings rutscht dadurch alles ganz an den linken Rand, was nicht gut aussieht. Ich hätte nun gerne, dass die Tabellen sich stets mittig auf der Seite befinden - sprich, dass, wenn 3 Tabellen nebeneinander sind, diese 3 mittig nebeneinander auf der Seite platziert sind, und wenn die 3 nach unten rutscht, die 1 und 2 mittig in der 1. Zeile sind und die 3 darunter, aber ebenfalls mittig. Zudem würde ich gerne zwischen den einzelnen Tabellen einen kleinen Abstand hinzufügen. Hat jemand von euch einen Vorschlag, wie ich das in den Quelltext packen kann?
Danke schonmal im Voraus!
Pascal
Code:
<table style="width: 275px; float: left;" cellspacing="10">
<tbody>
<tr>
<td style="text-align: center; background-image: url('images/bild1.png'); background-size: contain; height: 180px; width: 30%; background-position: center center; background-repeat: no-repeat no-repeat;"> </td>
</tr>
<tr>
<td style="width: 275px;">
<p class="uk-text-large" style="text-align: center;"><span style="color: #ffffff;"><strong>ÜBERSCHRIFT 1</strong></span></p>
</td>
</tr>
<tr>
<td style="width: 275px;">
<div class="jmm-item item-1">
<div class="jmm-text" style="text-align: left;"><span style="color: #ffffff;">Text 1...</span></div>
</div>
</td>
</tr>
</tbody>
</table>
<table style="width: 275px; float: left;" cellspacing="10">
<tbody>
<tr style="text-align: left;">
<td style="background-image: url('images/bild2.png'); background-size: contain; height: 180px; width: 30%; background-position: center center; background-repeat: no-repeat no-repeat;"> </td>
</tr>
<tr style="text-align: left;">
<td style="width: 275px;">
<p class="uk-text-large" style="text-align: center;"><span style="color: #ffffff;"><strong>ÜBERSCHRIFT 2</strong></span></p>
</td>
</tr>
<tr style="text-align: left;">
<td style="width: 275px;">
<div class="jmm-item item-1">
<div class="jmm-text" style="text-align: left;"><span style="color: #ffffff;">Text 2...</span></div>
</td>
</tr>
</tbody>
</table>
<table style="width: 275px; float: left;" cellspacing="10">
<tbody>
<tr style="text-align: left;">
<td style="text-align: center; background-image: url('images/bild3.png'); background-size: contain; height: 180px; width: 30%; background-position: center center; background-repeat: no-repeat no-repeat;"> </td>
</tr>
<tr style="text-align: left;">
<td style="width: 275px;">
<p class="uk-text-large" style="text-align: center;"><span style="color: #ffffff;"><strong>ÜBERSCHRIFT 3</strong></span></p>
</td>
</tr>
<tr>
<td style="width: 275px;">
<div class="jmm-item item-1">
<div class="jmm-text" style="text-align: left;"><span style="color: #ffffff;">Text 3...</span></div>
</td>
</tr>
</tbody>
</table>Wenn ich das Browserfenster nun schmaler ziehe, rutscht logischerweise die 3. (also rechte) Tabelle in die Zeile unter die anderen beiden Tabellen. Allerdings rutscht dadurch alles ganz an den linken Rand, was nicht gut aussieht. Ich hätte nun gerne, dass die Tabellen sich stets mittig auf der Seite befinden - sprich, dass, wenn 3 Tabellen nebeneinander sind, diese 3 mittig nebeneinander auf der Seite platziert sind, und wenn die 3 nach unten rutscht, die 1 und 2 mittig in der 1. Zeile sind und die 3 darunter, aber ebenfalls mittig. Zudem würde ich gerne zwischen den einzelnen Tabellen einen kleinen Abstand hinzufügen. Hat jemand von euch einen Vorschlag, wie ich das in den Quelltext packen kann?
Danke schonmal im Voraus!
Pascal
