Here is an html page example that I am working with:
However, when I add a new row beneath the existing row that contains a div block and form within it, I notice that the td tag in the first row expands in width, as depicted in the image below.
Below is the source code for the page:
<html>
<body>
<div style="left: 100px; position: relative; width: 400px;">
<table>
<tr>
<td><label style="font-size:17px;"> Select the operation:</label></td>
<td><select style="font-size:15px" property="" id="operation" name="operationSelection" onchange="categorySelector()">
<option value="addOp"> Addition </option>
<option value="searchOp"> Search </option>
<option value="listOp"> List </option>
<option value="updateOp"> Update </option>
<option value="deleteOp"> Delete </option>
</select></td>
</tr>
<tr>
<td>
<div id="add" style="position: relative; width: 200px;">
<form name="addForm" action="udm_2.jsp" method="POST">
<table>
<tr>
<td><label style="font-size:17px;"> Select the Gender:</label></td>
</tr>
<tr>
<td>
<input type="radio" name="addCategory" value="male" checked="checked">Male<br>
<input type="radio" name="addCategory" value="female">Female<br>
</td>
</tr>
<tr>
<td>
<input type="submit"/>
</td>
</tr>
</table>
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>I attempted to adjust the width of the td without success. Can someone please provide an explanation for this behavior?