Tabelle mit background-image quadratisch sein lassen

[Nakroma]

Hey,
Ich schäme mich etwas für dieses Problem, aber nach 3 Stunden rumprobieren und die SelfHTML Wiki + Google durchforsten stelle ich schlieslich diese Frage :|

Mein Ziel ist es hierbei eine Art Karte zu machen, wobei je eine Tabellenspalte ein Quadrant dieser ist. Ich muss das mit background-image machen weil ich oben links noch ein kleines Symbol hinmachen will (hier nicht wichtig wieso).

Nun zum eigentlichen Problem, was ich nicht auf die Reihe bekomme. Ich will das die Tabelle über die komplette Breite der Seite/des Containers geht aber trotzdem die Größe der Spalte quadratisch ist. Das es quadratisch ist, schaff ich eben nicht, es ist IMMER irgendwie gezogen, egal was ich ausprobiere :/

Das ist mein Ausgangscode, der nach unten durch gezogen wird.

<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
      <tr>
        <th align="left" valign="top" style="background-image:url(BrowserGame/img/map/haus.png);background-repeat:no-repeat;background-size:100% 100%"></th>
        <th align="left" valign="top" style="background-image:url(BrowserGame/img/map/street_vert.png);background-repeat:no-repeat;background-size:100% 100%"></th>
        <th align="left" valign="top" style="background-image:url(BrowserGame/img/map/haus.png);background-repeat:no-repeat;background-size:100% 100%"></th>
      </tr>
      <tr>
        <th align="left" valign="top" style="background-image:url(BrowserGame/img/map/haus.png);background-repeat:no-repeat;background-size:100% 100%"></th>
        <th align="left" valign="top" style="background-image:url(BrowserGame/img/map/street_obj_vert.png);background-repeat:no-repeat;background-size:100% 100%"></th>
        <th align="left" valign="top" style="background-image:url(BrowserGame/img/map/haus.png);background-repeat:no-repeat;background-size:100% 100%"></th>
      </tr>
      <tr>
        <th align="left" valign="top" style="background-image:url(BrowserGame/img/map/haus.png);background-repeat:no-repeat;background-size:100% 100%"></th>
        <th align="left" valign="top" style="background-image:url(BrowserGame/img/map/street_vert.png);background-repeat:no-repeat;background-size:100% 100%"></th>
        <th align="left" valign="top" style="background-image:url(BrowserGame/img/map/haus.png);background-repeat:no-repeat;background-size:100% 100%"></th>
      </tr>
    </table>

Wie gesagt ich schäme mich etwas das ich das nicht selber auf die Reihe bekomme, vielleicht kann mir ja hier jemand helfen :/

Mfg

 

[threadi]

Du müsstest die Maße per CSS angeben. Wenn Du weißt wieviele Tabellenzellen es sind, müsstest Du 100 durch deren Anzahl rechnen und dann diesen Wert jeder Zelle für Höhe und Breite geben. Also z.B.

td, th { width: 25%;height: 25%; }