breite tabelle im fixen div gewolltes scrollen

[ribosom]

Es geht um folgendes:

ich habe eine Tabelle die aus einer reihe (tr) besteht und aus ganz vielen spalten (td) besteht. Jedes td hat eine fixe breite von 10px. Die breite der Tabelle ist nicht definiert bzw. auto. Damit wird die breite der Tabelle durch die Anzahl der td's bestimmt. Bei 10 td's wäre die Tabelle demnach 100px breit. Das funktioniert auch wie erwartet.

Die Anzahl der td's ist dynamisch und Tabelle kann dadurch recht breit werden. Also will ich die Tabelle in ein div mit fester breite packen und das ganze auf overflow:auto setzen.

Erwartetes Ergebnis: wird die Tabelle größer als das div kann ich horizontal scrollen.

Pustekuchen. Die Tabelle wird nicht größer als das div, sondern die einzelnen Zellen werden kleiner 10px. Die Breitenangabe der Zellen wird also ignoriert und die Tabelle auf 100% breite gesetzt.

Die Frage ist,warum ist das so? Welche Regel greift da? Und viel wichtiger ist, wie mache ich es das so geht wie ich es gerne hätte?

Hier ein bisschen beispielcode:
html

Code: Alles auswählen

<div id="wrapper">
  <table id="forecast-table" cellspacing="0" cellpadding="0" border="0" >
    <tr>
      <td class="day-forecast" bgcolor="lightgrey"></td>
      <td class="day-forecast" bgcolor="lightgrey"></td>
      <td class="day-forecast" bgcolor="lightgrey"></td>
      .
      .
      .
      <td class="day-forecast" bgcolor="lightgrey"></td>
      <td class="day-forecast" bgcolor="lightgrey"></td>
      <td class="day-forecast" bgcolor="lightgrey"></td>
    </tr>
  </table>
</div>


css

Code: Alles auswählen

#wrapper { width: 500px; overflow: auto; background: #efefef; }
td { height: 20px; width: 10px; white-space: nowrap; }


[sejuma]

Bei mir funktioniert das mit deinen Codeschnipseln problemlos (IE 7).

Hat deine Tabelle eine Breitenangabe? Wenn die z.B. ein prozentualer Wert wäre, dann würde sich der auf den übergeordneten Div beziehen, wodurch das Scrollen verhindert wird.

Poste am besten einen Link zur Seite, damit man alles im Zusammenhang sieht.

[ribosom]

Danke für die Antwort.

Also, bei mir funktioniert es nicht. Auch nicht im ie7.

Ich hab jetzt mal meine Testseite angehängt. Die Styles sind im head.

die Tabelle hat 50 Zellen a 10px also eine Gesamtbreite von 500px. Das wrapper-div ist auf width:200px gesetzt und overflow:auto. Bei mir werden die Zellen gestaucht und es kommt kein scrollbalken.

Die Tabelle hat keinerlei Breitenangaben. Daher müsste sie meines Wissens nach mit width:auto gerendert werden. Wenn ich der Tabelle eine Breiten angebe die größer ist als der Wrapper, dann funktioniert es so wie ich will. Aber ich weiß ja nicht wie viele Zellen die Tabelle haben wird.

[sejuma]

Füge mal noch das bei #forecast-table hinzu:

Code: Alles auswählen

table-layout: fixed;

[ribosom]

Ändert bei mir leider auch nichts.

Da sich alle Browser gleich verhalten schätze ich mal, dass das sogar richtig ist und ich nur nicht kapiert habe wie sich Tabellen laut xhtml verhalten sollen.

Hat irgendjemand vielleicht noch eine Idee? Von mir aus auch ein Workaround.

[sejuma]

Sorry, der angegebene Selektor war falsch.

Code: Alles auswählen

#wrapper table {table-layout: fixed;}

[ribosom]

#wrapper table {table-layout: fixed;} geht leider auch nicht. Ist ja auch theoretisch egal ob table oder #wrapper table. Wenn dann müsste beides greifen.

Geht das denn bei dir? Wenn ja in welchem Browser?

[sejuma]

Immer diese unterschiedlichen Browser
Im IE 7 geht es. Allerdings musst du dann dem #wrapper eine Höhe geben, sonst wird dieser gestaucht.

Im FF und IE 8 geht es dann, wenn du der Tabelle noch zusätzlich einen Breitenwert gibst. Das löst dann aber wohl nicht dein Problem, weil du die Tabellenbreite nicht im voraus kennst. Oder du machst sie so breit, dass genügend Reserve ist.