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

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