My HTML code includes a form containing a table. Take a look:
This is the Code I'm Using:
<html>
<head></head>
<body>
<form onsubmit="" id="form1" action="" method="post" name="form1" style="position: relative; background-color: green;">
<table style="width: 908px; background-color: yellow; position: absolute; left: 350px; top: 350px;" border="0">
<tbody><tr>
<td colspan="3" align="center"><span style="color: Red; font-size: medium;" id="error"><br></span></td>
</tr><tr>
<td style="width: 300px;" align="right"><input style="font-size: medium; width: 35%;" tabindex="-1" id="btnReset" onclick="" value="Reset" name="btnReset" type="button"></td><td style="width: 300px;" align="center"><img style="border-width: 0px;" src=""></td><td style="width: 300px;" align="left"><input style="font-size: medium; width: 35%;" id="btnNext" onclick="" value="Next" name="btnNext" type="submit"></td>
</tr><tr>
<td></td><td style="width: 34%;" align="center">For assistance please see <a href="">Help</a> page<br><br></td><td></td>
</tr>
</tbody>
</table>
<input value="" id="StoredProcedure" name="StoredProcedure" type="hidden"><input value="False" id="SubmitFile" name="SubmitFile" type="hidden"><input value="False" id="" name="" type=""><input value="" id="" name="" type="hidden"><input value="False" id="" name="" type="hidden">
</form>
</body>
</html>
I'm attempting to have the table move similar to how an embedded tag does in this example from this tutorial site. Here is the specific example code:
Example Code:
<html>
<head>
<style type="text/css" media="screen">
#div-1 {
position:relative;
}
...
.job {
margin-top:1em;
border:1px solid #aaa;
padding:1em;
background:#ddd;
}
</style>
</head>
...
</html>
Compare my code with the example - when resizing the browser, the children of the main div will move while remaining proportional, unlike the elements in my code. I wrapped the form in a div and applied some styles as seen below to resolve this issue. See the modified code for reference:
<html>
<head></head>
<body>
<div style="position: relative; background-color: green; width: 610px; margin: 0px auto;">
<form onsubmit="" id="form1" action="" method="post" name="form1">
<table style="width: 908px; background-color: yellow; position: absolute; left: 0px; top: 350px;" border="0">
<tbody><tr>
<td colspan="3" align="center"><span style="color: Red; font-size: medium;" id="error"><br></span></td>
</tr><tr>
<td style="width: 300px;" align="right"><input style="font-size: medium; width: 35%;" tabindex="-1" id="btnReset" onclick="" value="Reset" name="btnReset" type="button"></td><td style="width: 300px;" align="center"><img style="border-width: 0px;" src=""></td><td style="width: 300px;" align="left"><input style="font-size: medium; width: 35%;" id="btnNext" onclick="" value="Next" name="btnNext" type="submit"></td>
</tr><tr>
<td></td><td style="width: 34%;" align...
</body>
</html>