Make a <td> element stay in its original position when a new <td> element is appears in html/css

by

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 all radio buttons are selected

When only the last radio button is 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>

25 thoughts on “Make a <td> element stay in its original position when a new <td> element is appears in html/css”

  1. .middle-td{
  width:50%;   
}
td,th{
    width:25%;
}
.wrapper
{
    border:1px solid #ddd;
    padding:20px;
}
    <div class="wrapper">
    <table cellpadding="0" cellspacing="0" border="0" class="standard-table standard-table-mini" summary="Object Table" style="padding-left: 20; padding-right: 20px;">
        <thead>
            <tr>
                <th align="left" style="right-padding:10px;"><b>Action</b></th>
                <th class="middle-td" align="center"><b>Components</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 class="middle-td" align="center">
                    <div class="field">
                        <select multiple="" id="ComponentsId" name="ComponentId" class="dropdown" size="5" style="width: 190px;height:95px;margin-top: -60px;"><//some option value stuff />
                    </div>
                </td>
                <td align="left" style="display: block;" id="pbsclabel"> <input type="text" id="seconds" name="seconds" value="30"> 
                <label for="seconds">seconds</label><br>
                    Check results in directory:
                    <br>
                    /sdb1/ngpgsftp/PBSC/WIRESHARK/
                    </td>
            </tr>
        </tbody>
    </table>
</div>
    Reply

Leave a Comment