Tabelle wird unerwartet gesteckt

[romero]

Hallöchen an Euch,

ich habe Tabelle mit einem bestimmter Weite aber sie wird beim "Erstellen" (mittels Javascript) gestreckt, um 4px.

Das Ganze sieht wie folgt aus:

			<tr class="Zeile22" id="div-container">  
				<td class="Spalte1"></td>  
				<td colspan=10 bgcolor=#FFFFFF class="Spalte27"><div id="msgs" class="rollbalken"></div></td>  
				<td class="Spalte1"></td>  
			</tr>

die CSS-Anweisung sieht so aus:

.rollbalken {  
 margin:0px;  
 padding:5px;  
 border:2px;  
 border-style:inset;  
 overflow:scroll;  
 overflow-x:hidden;  
}  
  
td.Spalte27 {  
 width:1108px;  
 margin:0px;  
 padding:0px;  
}

In dieser Spalte wird dann die Tabelle eingefügt, nachdem sie mittels Javascript erstellt wurde. Unter der id="div-container" wird nur die Höhe errechnet. Sie spielt also keine Rolle.

Nun erstelle ich die Tabelle, was wie folgt ausschaut:

	table_untersch = document.createElement( "table" );  
	table_untersch.id = "duda";  
	table_untersch.className = "table3";  
	table_untersch.cellspacing = "2px";  
	tbody_untersch = document.createElement( "tbody" );  
	tbody_untersch.id = "Tabellenkopf_Unterschiede_" + Ident;  
  
	table_untersch.appendChild( tbody_untersch );  
	document.getElementById( "msgs" ).appendChild( table_untersch );

...

	for( var i = 0; i < UnterschiedeMerkmal.length; i++ )  
	{  
		var vorhanden = UnterschiedeVorhanden[i];  
		var neu = UnterschiedeNeu[i];  
		var merkmal = UnterschiedeMerkmal[i];  
  
		tr_untersch = document.createElement( "tr" );  
		td0_untersch = document.createElement( "td" );  
		td1_untersch = document.createElement( "td" );  
		td2_untersch = document.createElement( "td" );  
		td3_untersch = document.createElement( "td" );  
		td4_untersch = document.createElement( "td" );  
		td5_untersch = document.createElement( "td" );  
  
		tr_untersch.height = "30";  
  
		tr_untersch = document.getElementById( "Tabellenkopf_Unterschiede_" + Ident ).appendChild( tr_untersch );  
  
		TAB_untersch = document.getElementById( "Tabellenkopf_Unterschiede_" + Ident );  
  
		td00_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td0_untersch );  
		td11_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td1_untersch );  
		td22_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td2_untersch );  
		td33_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td3_untersch );  
		td44_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td4_untersch );  
		td55_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td5_untersch );  
		  
		td00_untersch.width = "5px";  
		td11_untersch.width = "275px";  
		td11_untersch.className = "Zusatzliste";  
		td11_untersch.align = "left";  
		td22_untersch.width = "65px";  
		td22_untersch.align = "center";  
		td22_untersch.className = "Zusatzliste";  
		td33_untersch.width = "275px";  
		td33_untersch.className = "Zusatzliste";  
		td33_untersch.align = "left";  
		td44_untersch.width = "65px";  
		td44_untersch.className = "Zusatzliste";  
		td44_untersch.align = "center";  
		td55_untersch.width = "325px";  
		td55_untersch.className = "Zusatzliste";  
		td55_untersch.align = "left";  
  
		tr_untersch.getElementsByTagName( "td" )[0].innerHTML = "";  
		tr_untersch.getElementsByTagName( "td" )[1].innerHTML = vorhanden;  
		tr_untersch.getElementsByTagName( "td" )[2].innerHTML = "-";  
		tr_untersch.getElementsByTagName( "td" )[3].innerHTML = neu;  
		tr_untersch.getElementsByTagName( "td" )[4].innerHTML = "";  
		tr_untersch.getElementsByTagName( "td" )[5].innerHTML = merkmal;  
  
		k++;  
	};

Die Tabelle hat einen Spaltenabstand (cellspacing) von 2 Pixel. Und wenn ich diese Werte der einzelnen Spalten mit den Spaltenabstand zusammenrechne, ergibt sich 1024 Pixel. Wenn ich die Weite der einzelnen Zeilen mittels alert( tr_untersch.offsetWidth ); ausgebe, erhalte ich ebenfalls 1024px.

Nun habe ich noch der Tabelle eine CSS-Anweisung gegeben (s.o. className="table3"). Die sieht dann so aus:

.table3 {  
 width:1028px;  
 border:2px;  
 border-style:outset;  
 border-color:lightgrey;  
 margin-left:25px;  
}  
  
.ZusatzListe {  
 vertical-align:middle;  
 margin:0px;  
 padding:0px;  
}  
  
.Unterschiede {  
 border:0px;  
 vertical-align:middle;  
 margin:0px;  
 padding:0px;  
 font-weight:bold  
}

Die Tabelle ist 1028px groß da ich ja noch links sowie rechts 2px Rand habe.
Also müsste "therotisch" meine Zeilen mit deren Spalten genau reinpassen.

Nun mein Problem. In der Praxis wird die Tabelle scheinbar größer bzw. die Ausgangsspalte (id="msgs") wird gestreckt um ca. 2 oder 3px, so genau kann ich es nicht erkennen. Woher kommt dieser "Fehler"? Liegt es an irgendwelchen CSS-Werten?

Lasse ich aber unter .table3 die Anweisung width=1028px weg, dann entsteht keine sichtbare Verzehrung der Tabelle (table3), der Spalte (msgs) bzw. der gesamten Tabelle.

Ich habe dazu noch eine Art Leerung der Spalte durch Javascript erstellt, welches die Spalte "msgs", wenn man eine andere Auswahl trifft, leert, aber es leert zwar den Inhalt dieser Spalte, aber der Rollbalken bleibt sichtbar, bzw scrollbar, auf der Länge wie die Tabelle vorher lang / hoch war. Aber der Balken müsste doch gesperrt sein, da ja eigentlich kein Inhalt mehr da ist.

LG Romero