nicht angemeldet
Hallo.
Folgendes Szenario: In einer Tabelle habe ich ein Select Element welches unterschiedliche Werte zur Auswahl bringt (logisch). Nun soll mittels
<select ... onChange="describe(document.choice.tablename.value)">
eine JavaScript Funktion aufgerufen werden, die dynamisch den Wert einer Tabellenzelle (<td>...</td>) ändert. Der neue Wert ist ein Beschreibungstext für den selektierten Wert.
Das Ändern des Wertes in der Tabelle funktioniert auch, nur dass im Mozilla das <td>...</td> den neuen Text nicht umbricht, sondern die Tabelle ständig die Breite ändert bzw. der neue Text über die Tabellenzelle hinausragt.
Wie muss ich den Text "richtig" ändern, damit die Zelle die Breite behält?
PS: Wenn ich anstelle des td ein DIV ausserhalb der Tabelle verwende, dann klappt's wo wie erwartet - nur innerhalb der table geht's nicht :-(
Code:
function describe(table) {
switch(table) {
case "Wert1":
if (document.all) {
// IE funktioniert wie erwartet...
document.all.description.innerHTML ="Ein superlanger Beschreibungstext, der im original viel länger ist";
} else {
// mozilla variante, die "zappelt"
var div = document.getElementById("description");
div.innerHTML="Ein superlanger Beschreibungstext, der im original viel länger ist";
}
break;
// ..and so on for all values...
}
}
HTML:
<form name="choice" action="edit">
<table align="center"
style="table-layout:fixed;
width:570px;
background-color:#C0B2D2;">
<tr class="blank">
<td class="blank" style="width:555px">
<div style="font-size:11pt;margin:5px">
Please select the table you want to edit and click
on "go!".
</div>
</td></tr>
<tr class="blank">
<td class="blank" style="width555px;
padding-left:8px;
padding-bottom:5px">
<select style="width:500px" name="tablename" size="1"
onChange="describe(document.choice.tablename.value)">
<option value="Wert1">Laber1</option>
<option value="Wert2">Laber2</option>
<option value="Wert3">Laber3</option>
</select>
 
<div class="button"
onClick="document.forms[0].submit()">go!</div>
</td></tr>
<tr class="blank">
<td id="description" class="blank"
style="width:555px; height:120px;
background-color:#a3b3c7;
padding:5px; margin:5px; font-size:11pt">
  <!-- Zu beginn leer -->
</td>
</tr>
</table>
BTW: Wie bekomme ich ein table align="center" mittels CSS hin?
Grüße
Martin.