# Dynamische Tabelle mit DIV (overflow Problem)



## ev0lst (6. August 2007)

Hallo.

Ich habe eine normale Tabelle mit Zeilen und Spalten erstellt.

Hier der Code:


```
<table......>
<tr>
<td width="50%">spalte 1</td><td width="50%"><div id="box" onmouseover="show('categories');" style="display:none;">boxinhalt</div></td>
</tr>
</table>
```

Nun die Frage dazu, ob das mit dem DIV möglich ist den Rahmen der Tabelle zu überlappen, ohne die Größe der Tabelle zu verändern.

Wichtig dabei ist, dass sich unter dieser Tabelle noch eine weitere befindet. Diese kann jedoch nicht nach rutschen, weil der Inhalt des DIV doch sehr umfangreich ist 

Danke!


----------



## Quaese (6. August 2007)

Hi,

vielleicht noch ein weiteres relative positioniertes DIV in der Zelle unterbringen. Das DIV, das überlappen
soll, darin absolut positionieren.

```
<table border="1" width="100%">
  <tr>
    <td width="50%">spalte 1</td>
    <td width="50%">
      <div style="position: relative;">
        <div id="box" style="position: absolute; top: 0; left: 0;" onmouseover="show('categories');">
          boxinhalt<br />
          und mehr ...
        </div>
      </div>
    </td>
  </tr>
</table>
```
Vielleicht hilft Dir das weiter.

Ciao
Quaese


----------



## ev0lst (6. August 2007)

Danke für die Antwort. Leider kann und wird das aber nicht funktionieren.

- position:absolute mit top und left Angaben positioniert alles nach oben links
- nach meinem Wissen fehlen auch z-index angaben, aber leider kann ich es nicht genau sagen

Das mit dem DIV drum herum klang super, geht aber nicht...

Habe deinen Code trotzdem probiert!

Danke für Deine Hilfe...

Vielleicht kennt ja jemand noch einen anderen Weg.


----------



## Quaese (6. August 2007)

Hi,

mag sein, dass wir aneinander vorbeireden, aber bei mir funktioniert mein Beispiel. Das enthaltene DIV
überlappt die Zellengrenzen, ohne die Tabelle zu verändern. Getestet in IE 6 und 7, Firefox 1.5 und 2 und 
Opera 9.

Absolut positionierte Elemente richten sich übrigens am nächsten Elternelement mit relativer Positionierung 
aus - in diesem Fall also das umschliessende äussere DIV.

Komplettes Beispieldokument:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table border="1" width="100%">
  <tr>
    <td width="50%">spalte 1</td>
    <td width="50%">
      <div style="position: relative;">
        <div id="box" style="position: absolute; top: -12px; left: 0; background: #ccc;" onmouseover="show('categories');">
          boxinhalt<br />
          und mehr ...
        </div>
      </div>
    </td>
  </tr>
</table>
</body>
</html>
```

Ciao
Quaese


----------

