Manglende sammentrækning af tabel
Jeg har lavet følgende kode:<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<FORM>
<TABLE BORDER=1>
<TR>
<TD ALIGN="Center">
<INPUT TYPE="Text" VALUE=2 STYLE="z-index: 0; width: 1em; position: relative;">
<INPUT TYPE="Text" VALUE=1 STYLE="z-index: 1; width: 1em; position: relative;">
</TD>
</TR>
</TABLE>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
document.forms[0].elements[0].style.width=200+'px'
document.forms[0].elements[0].style.height=200+'px'
document.forms[0].elements[1].style.left=-(document.forms[0].elements[1].offsetLeft-document.forms[0].elements[0].offsetLeft)
document.forms[0].elements[1].style.top=-(document.forms[0].elements[1].offsetTop-document.forms[0].elements[0].offsetTop)
</SCRIPT>
</BODY>
</HTML>
men problemet er at der bliver noget tomrum til højre i tabelcellen.
Jeg regnede med at det skyldtes at de 2 felter på et tidspunkt står side om side med hinanden, udvider tabellen, men at tabellen ikke trækker sig sammen. Derfor lavede jeg det lidt om til følgende:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<FORM>
<TABLE BORDER=1>
<TR>
<TD ALIGN="Center">
<INPUT TYPE="Text" VALUE=1 STYLE="z-index: 1; width: 1em; position: relative;">
<INPUT TYPE="Text" VALUE=2 STYLE="z-index: 0; width: 1em; position: relative;">
</TD>
</TR>
</TABLE>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
document.forms[0].elements[1].style.left=-(document.forms[0].elements[1].offsetLeft-document.forms[0].elements[0].offsetLeft)
document.forms[0].elements[1].style.width=200+'px'
document.forms[0].elements[1].style.height=200+'px'
</SCRIPT>
</BODY>
</HTML>
Her placerer jeg de 2 INPUT felter ovenpå hinanden, inden jeg forstørrer den ene af dem. Dermed troede jeg problemet var løst, men jeg får stadig noget tomrum i cellen :(
Hvorfor og hvordan løser jeg det problem?
