✔ 2 Tabellen horizontal nebeneinander

Status
Nicht offen für weitere Antworten.
L

lomax-fx

Grünschnabel
Wie ihr auf dem Bild unschwer erkönnen könnt habe ich eine Tabelle mit einer Breite von 50%. Jetzt hätte ich gerne auf der anderen Seite die gleiche Tabelle mit auch 50% + einen Abstand von 12px zwischen der linken und rechten Tabelle. Das klappt wunderbar wenn ich bei der linken Tabelle "style="float: left;" einfüge, allerdings sind die Tabellen dann ohne Abstand direkt nebeneinander. Hängt sicherlich irgendwo mit der 50% als Größe zusammen. Eine feste Breite in Pixel möchte ich nicht als Wert dort angeben also könnt ihr mir vielleicht weiterhelfen sodass es mit dem Abstand auch bei prozentualer Angabe klappt?

hrdm5.th.png


Gruß
 
Lösungsvorschlag:

HTML: 
<body>

<table style="float:left;width:49.5%;" border="1">
  <tr>
    <td>links</td>
  </tr>
</table>

<table style="float:right;width:49.5%;" border="1">
  <tr>
    <td>rechts</td>
  </tr>
</table>

</body>
 
Vereinfacht so:

HTML: 
<table border="1" cellspacing="5" width="100%">
 <tr>
   <td style="width:50%;">links</td>
   <td style="width:50%;">rechts</td>
 </tr>
</table>
 
Da muß ich Dich leider enttäuschen, denn dieser Seitenaufbau funktioniert nach der gleichen Methode:

Code: 
.mulitbox-row {
	width: 50%;
	background-color: #1F0B0B;
	vertical-align: top;
}
HTML: 
<table class="mulitbox">
    <tbody>
        <tr>
            <td class="mulitbox-row">
                    ...
            </td>
            <td class="mulitbox-row">
                    ...
            </td>
        </tr>
    </tbody>
</table>
 
HTML: 
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="50%" cellpadding="10" cellspacing="10" id="box-layout" style="float: left; margin-right: 12px;">
      <tr>
        <td id="box-header">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
      <table width="50%" cellpadding="10" cellspacing="10" id="box-layout">
        <tr>
          <td id="box-header">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>

Kannst du an dem Code erkennen warum die Tabellen in Opera 9.02 untereinander sind? In der Vorschau von Dreamweaver sowie in Firefox 1.5 sind sie nebeneinander also so wie ich es haben will.
 
Probier es mal so:

Code: 
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="50%" cellpadding="10" cellspacing="10" class="box-layout" style="float: left;">
      <tr>
        <td class="box-header">header left</td>
      </tr>
      <tr>
        <td>left</td>
      </tr>
      <tr>
        <td>left</td>
      </tr>
    </table>
      <table width="50%" cellpadding="10" cellspacing="10" class="box-layout" style="float: right;">
        <tr>
          <td class="box-header">header right</td>
        </tr>
        <tr>
          <td>right</td>
        </tr>
        <tr>
          <td>right</td>
        </tr>
      </table></td>
  </tr>
</table>
Anmerkung: eine ID darf in einem Dokument nur einmal vergeben werden. Aus diesem Grund habe ich in diesem Quellcode das id-Attribut durch das class-Attribut ersetzt.
 
Also so klappts wohl aber sobald da ein margin drin ist wegen dem Abstand zwischen den beiden Zeilen verschiebt Opera die Box nach unten aber Firefox und Dreamweaver zeigen es korrekt an.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück