Spalten Breite von Tabellen

[Ehdoranil]

Hallo
hab ein Problem mit HTML/CSS.
Ich habe eine Tabelle mit foglendem Code (vereinfacht):
    <table class="tree">
      <tr>
        <td colspan="2" class="data0">company</td>
        <td class="last">&nbsp;</td>
      </tr><tr>
        <td colspan="2" class="data0">Products</td>
        <td class="last">&nbsp;</td>
      </tr><tr id="row1">
        <td class="row"></td>
        <td colspan="2" class="folder">
          <table class="tree">
            <tr>
              <td colspan="2" class="data1">Unit1</td>
              <td class="last">&nbsp;</td>
            </tr><tr>
              <td colspan="2" class="data1">Unit2</td>
              <td class="last">&nbsp;</td>
            </tr><tr>
              <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
          </table>
        </td>
      <tr><tr>
        <td colspan="2" class="data0">News</td>
        <td class="last">&nbsp;</td>
      </tr><tr>
        <td colspan="2" class="data0">Contact</td>
        <td class="last">&nbsp;</td>
      </tr><tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
    </table>

Im Firefox (1.6) wird auch schön, .row-Zellen mit nur einem Leerzeichen Breite angegeben, .data0-Zellen gerade so breit wie ihr breitester Inhalt. .last-Zellen sollen dafür beliebig weit ausgedehnt werden.
Leider schmeist er mir dieses layout aber im IE und unter Opera total um. Auch Angaben wie style="width:1px", colgroups oä haben bislang noch keinen Erfolg gebracht.
Hat jemand ne Idee, wie ich es browserübergreifend so einstellen kann?
//Zur verbesserten Visualisierung des Problems ist noch ein td{ background-color:grey; } definiert

Danke für eure Hilfe!

[Heiko Jägle]

Hallo Ehdoranil,

leider sehen wir die CSS-Angaben nicht. Bitte nochmal nachposten.
Eine mögliche Erklärung vorab:
<table> hat keine Vorgabe, wie breit sie werden (darf). Dadurch nimmt sich der Browser die Freiheit, sie so breit zu machen, wie er sie braucht. Also bis max. Seitenbreite bzw. Breite des übergeordneten Elementes.

Gruss
Heiko

[Ehdoranil]

.row{
  width:1px;
}
.tree td{
  background-color:grey;
}
.data0{
  width:1px;
}

sollte es über tabellen keine möglichkeit geben - siehst du dann ne alternativ möglichkeit um dieses layout so hinzubekommen?
wichtig ist, dass die texte in den zellen variieren (multi-language), dh ich kann die wirkliche breite auch nicht vorhersagen

[Heiko Jägle]

Hi Ehdoranil

ich hab mal ein wenig rumprobiert.
Die colspan Angaben bringen den Browser wohl bei der Spaltenbreitenberechnung durcheinander. Mit

<table class="tree" border="1">
  <colgroup>
    <col width="5">
    <col width="30">
    <col width="40">
    <col width="90">
  </colgroup>
  <tr>
    <td colspan="2" class="data0">company</td>
    <td class="last">&nbsp;</td>
  </tr><tr>
 ...
</table>

kannst du ihm auf die Sprünge helfen. Die col-Angaben (in Pixel oder Prozent) passen sich dem Inhalt an.

Wenn dir das nicht zusagt, kannst du mit CSS
<table stlye="table-layout:fixed;"> in das Rendering des Browsers eingreifen, musst dann aber einige width-Angaben vorgeben.

Hab's erstmal nur mit IE und Opera 8 getestet. Den Feinschliff überlassse ich dir ;-)

Gruss
Heiko

[Ehdoranil]

Hi

also mit colgroup hat ichs ja auch probiert (nur mit 3 statt 4 spalten -> wieso die zusätzliche?)
hab deine version mal ausprobiert - aber auch hier zieht er im IE 6.0 und unter opera 8.52 die .row spalte breiter als von mir vorgegeben
welche dtd hast du verwendet?

table-layout:fixed =>
dann passen sich doch die spalten breiten nicht mehr dem text an; die spalten-breite wird erzwungen und der text auf mehrere zeilen verteilt - grade das will ich ja nicht:(

[Heiko Jägle]

Hi

also mit colgroup hat ichs ja auch probiert (nur mit 3 statt 4 spalten -> wieso die zusätzliche?)

Upps, Flüchtigkeitsfuhler meinerseits.

hab deine version mal ausprobiert - aber auch hier zieht er im IE 6.0 und unter opera 8.52 die .row spalte breiter als von mir vorgegeben

Hmm, bis auf ca. eine Leerzeichenbreite krieg ich's klein. Ansonsten muss ich passen.

welche dtd hast du verwendet?

Keine - fast&dirty Sourcecode.

table-layout:fixed =>
dann passen sich doch die spalten breiten nicht mehr dem text an; die spalten-breite wird erzwungen und der text auf mehrere zeilen verteilt - grade das will ich ja nicht:(

"nowrap" ist auch keine g'scheite Lösung.

Dann hilft wohl nur ein gänzlich anderes Tabellenlayout ohne colspan. Wie wär's mit _einer_ durchgehenden Tabellenzelle in einer Zeile und darin mit margin-left zu arbeiten?

Gruss
Heiko