How do I make a <td>
stay in the center when a new <td>
is set to display='block'
. As you can see from the first image, when any radio button is selected, the components
section is centered. But in the second image, when the last radio button is selected, a new <td>
appears because then it gets set to display='block'
and moves the center Components section a little to the left. How do I make it stay in the center?
When all radio buttons are selected:
When only the last radio button is selected:
<div>
<table cellpadding="0" cellspacing="0" border="0" class="standard-table standard-table-mini" summary="Object Table" style="padding-left: 224px; padding-right: 50px;">
<thead>
<tr>
<th align="center" style="right-padding:10px;"><b>Action</b></th>
<th align="left"><b>Components</b></th>
</tr>
</thead>
<tbody>
<tr class="even">
<td align="left">
<div class="field">
<input type="radio" name="compAction" id="COMP_SHUTDOWN" value="COMP_SHUTDOWN" onclick="controlEquipment(); displayLabel();">
Shutdown<br>
<input type="radio" name="compAction" id="COMP_RESET" value="COMP_RESET" onclick="controlEquipment(); displayLabel();">
Reset<br>
<input type="radio" name="compAction" id="COMP_SWITCHOVER" value="COMP_SWITCHOVER" onclick="controlEquipment(); displayLabel();">
Switchover<br>
<input type="radio" name="compAction" id="COMP_SHORTLOOPCALIBRATION" value="COMP_SHORTLOOPCALIBRATION" onclick="controlEquipment(); displayLabel();">
Short-Loop Calibration<br>
<input type="radio" name="compAction" id="COMP_RFPATHSWITCH" value="COMP_RFPATHSWITCH" onclick="controlEquipment(); displayLabel();">
RF-Path Switch<br>
<input type="radio" name="compAction" id="HOTSWAPIN" value="HOTSWAPIN" onclick="controlEquipment(); displayLabel();">
Hot-Swap In<br>
<input type="radio" name="compAction" id="HOTSWAPOUT" value="HOTSWAPOUT" onclick="controlEquipment(); displayLabel();">
Hot-Swap Out<br>
<input type="radio" name="compAction" id="COMP_PBSCCNLINK" value="COMP_PBSCCNLINK" onclick="controlEquipment(); displayLabel();">
PBSC-CN Link<br>
</div>
</td>
<td align="center" style="padding-right: 60px;">
<div class="field">
<select multiple="" id="ComponentsId" name="ComponentId" class="dropdown" size="5" style="width: 190px;height:95px;"><//some option value stuff />
</div>
</td>
<td align="right" style="display: block;" id="pbsclabel"> <input type="text" id="seconds" name="seconds" value="30"> <label for="seconds">seconds</label><br>
<b>Check results in directory:</b><br> /sdb1/ngpgsftp/PBSC/WIRESHARK/</td>
</tr>
</tbody>
</table>
</div>
1 thought on “Make a <td> element stay in its original position when a new <td> element is appears in html/css”