css und TD width Problem

F98

Halli Hallo,

ich habe einen Seite mit Tables. Im unteren bereich sind 3 Spalten. Links 200Pixel, Mitte 100%, Rechts 200Pixel breit.

Der HTML Code für den unteren Tabellenbereich sieht wie folgt aus:

<table class="maintable">

      <tr>
       <td class="tdmainbottomleft">
        Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left 
       </td>
       <td class="tdmainbottommiddle">
        Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle 
       </td>
       <td class="tdmainbottomright">
        Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right 
       </td>
      </tr>

     </table>

Die Stylesheets wie folgt:

table.maintable
{ border: 1px; 
  border-collapse: collapse;
  border-style: solid;
  border-color: #000000;
  border-spacing: 0px;
  padding: 0px;
  width: 100%; 
  text-align: center;
  background-color: #FFFFFF;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 10px;
  font-weight: normal;
}

td.tdmainbottomleft
{
  height: 100%;
  width: 200px;  
  vertical-align: middle;
}

td.tdmainbottommiddle
{
  height: 100%;
  width: 100%;
  vertical-align: middle;
}

td.tdmainbottomright
{
  height: 100%;
  width: 200px;
  vertical-align: middle;
}

Warum sind dann Links und Rechts die beiden Spalten so schmal (IE und Opera) und nicht 200px breit? Was mache ich falsch?

Linnea

lass mal das

width: 100%;

aus td.tdmainbottommiddle raus

F98

Hm. Habs jetzt anders gemacht:

<table class="maintable">

      <tr>
       <td>
        <table class="lefttable">
         <tr>
          <td>
           Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left
          </td>
         </tr>
        </table> 
       </td>
       <td>
        <table class="centertable">
         <tr>
          <td>
           Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle
          </td>
         </tr>
        </table>  
       </td>
       <td>
        <table class="righttable">
         <tr>
          <td>
           Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
          </td>
         </tr>
        </table>  
       </td>
      </tr>

     </table>

Stylesheet:

table.maintable
{ border: 1px; 
  border-collapse: collapse;
  border-style: solid;
  border-color: #000000;
  border-spacing: 0px;
  padding: 0px;
  width: 100%;
  text-align: center;
  background-color: #FFFFFF;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 10px;
  font-weight: normal;
}

table.lefttable
{ border: 1px; 
  border-collapse: collapse;
  border-style: solid;
  border-color: #000000;
  border-spacing: 0px;
  padding: 0px;
  width: 200px;
  text-align: center;
  background-color: #FFFFFF;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 10px;
  font-weight: normal;
}

table.righttable
{ border: 1px; 
  border-collapse: collapse;
  border-style: solid;
  border-color: #000000;
  border-spacing: 0px;
  padding: 0px;
  width: 200px;
  text-align: center;
  background-color: #FFFFFF;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 10px;
  font-weight: normal;
}

table.centertable
{ border: 1px; 
  border-collapse: collapse;
  border-style: solid;
  border-color: #000000;
  border-spacing: 0px;
  padding: 0px;
  width: 100%;
  text-align: center;
  background-color: #FFFFFF;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 10px;
  font-weight: normal;
}

Also 3x Table in die <TD></TD> und das funzt. Siehe Link oben. Komisch nur, zumal man ja eigentlich auch laut selfhtml die Breite des TD mit witdh angeben darf. So bestimmt nun die Tabelle die Breite. Anmerkungen?

mantiz

Als ich noch viel mit Tabellen-Layouts gearbeitet habe, da habe ich das so gemacht, dass ich, um die festen Breiten garantiert zu haben, immer eine Zeile mit 1px Höhe am Anfang der Tabelle definiert habe, wo ich dann 1px-hohe transparente GIFs reingepackt habe. In Deinem Fall würde ich also in die linke und rechte Spalte jeweils eine 1px-hohe, 200px breite transparente GIF-Grafik reinpacken und die mittlere Spalte auf 100% setzen.