one td in a tr takes more width and pushes out everything else

Question

I am not a professional front end developer. I do server side programming mostly. But I have to do this task myself and have run out of ideas.

In the above picture, the table displayed has the below code in the JSP.

<table width="100%" style="margin-bottom: 20px;">

    <tr>
      <td style="padding-bottom: 29px; padding-top: 15px;" colspan="6"><strong style="font-size: 12px;" >Print Queue Report</strong></td>
    </tr>

            <tr>
            <td width="8%" ><strong>Customer:</strong></td>
            <td width="18%" style="text-align: left">
                    <c:choose>
                    <c:when test="${!empty customersList}">
                        <html:select property="customer" style="width: 150px;color:#505050;">
                            <html:option value="">--Select Customer--</html:option>
                            <html:optionsCollection name="customersList" label="label"
                                value="key" />
                        </html:select>
                    </c:when>
                    <c:otherwise>
                                        None Available
                                    </c:otherwise>
                </c:choose></td>
            <td width="10%" style="text-align: right"><strong
                style="padding-right: 10px;">HAWB:</strong></td>
            <td  width="18%" style="text-align: left"><html:text property="hawb" size="20" maxlength="20"
                    onkeyup="fixHAWB(this);" onchange="fixHAWB(this);"
                    style="width: 145px;height:12px;">

                </html:text></td>
            <td width="10%" style="text-align: right"><strong 
                style="padding-right: 10px;">Branch:</strong></td>
            <td width="10%" style="text-align: left">
                <c:choose>
                    <c:when test="${!empty branchList}">
                        <html:select property="branch" style="width: 150px;color:#505050;">
                            <html:option value="">--Select Branch--</html:option>
                            <html:optionsCollection name="branchList" label="label"
                                value="key" />
                        </html:select>
                    </c:when>
                    <c:otherwise>
                                        None Available
                                    </c:otherwise>
                </c:choose>
            </td>

            <td width="19%">&nbsp;</td>
            <td width="6%"></td>
        </tr>


            <tr>
            <td width="8%" style="text-align: left"><strong 
                style="padding-right: 10px;">Print Status:</strong></td>
            <td width="18%" style="text-align: left">
            <html:select property="pStatus" style="width: 150px;color:#505050;">
                            <html:option value="">--Select Print Status--</html:option>
                            <html:option value="p">Printed</html:option>
                            <html:option value="NP">Not Printed</html:option>
                        </html:select>
            </td>

            <td width="10%" style="text-align: right"><strong 
                style="padding-right: 10px;">Completion Status:</strong></td>
            <td width="18%" style="text-align: left">
            <html:select property="cStatus" style="width: 150px;color:#505050;">
            <html:option value="">Select Completion Status</html:option>
            <html:option value="S">Completed</html:option>
            <html:option value="I">Not Completed</html:option>
            </html:select>
            </td>
            <td width="8%" style="text-align: right"><strong 
                style="padding-right: 10px;">From: </strong></td>
            <td> <html:text
                    property="startDT" readonly="true" style="width:125px;"
                    styleClass="dateTxt" /> <IMG src="images/cal.gif"
                style="position: relative; top: 2px;"
                onclick="cal.select(startDT,'startDT','MM/dd/yyyy')" width="16"
                height="16" alt="Click Here to Pick up the date"></td>

            <td width="8%" align="right" style="padding-left: 5%;" ><strong 
                style="padding-right: 5%;">To:</strong></td>
            <td align="left" style="text-align: left"><html:text property="endDT" readonly="true"
                    style="width:125px; margin-left: 0px;" styleClass="dateTxt" /> <IMG
                src="images/cal.gif" style="position: relative; top: 2px;"
                onclick="cal.select(endDT,'endDT','MM/dd/yyyy')" width="16"
                height="16" alt="Click Here to Pick up the date"></td>

            <td width="1%">&nbsp;</td>
            <td width="18%"></td>
        </tr>

    </table>

    <table style="position: relative; top: -70px; right: 26px;"
        width="100" align="right">
        <tr>
            <td><html:submit property="method" value="Submit"
                    onclick="return goodbye();" styleClass="btn2" /></td>
            <td><html:submit
                    property="method" value="Reset" styleClass="btn2" /></td>
        </tr>
    </table>

I want the "to:", the end date text field, and the calendar image to be in one line and spaced like the "from:" group. I will also fix the position of the submit and reset buttons.

I did not write this jsp. I am just trying to fix it. Any help would be appreciated.

Answer 1

In the first row, you have <td colspan="6">, which means "<td> that will stretch over 6 columns.

In the second row, you have 8 <td> elements, which gives you 8 columns.

In the third, you have 10 (last two are empty) - 10 columns in effects.

In a HTML table, the number of columns should be consistent among rows, in other case some cells are stretched.

This is a fiddle where I've added border to your table to visualize what I'm talking about.

To fix your issue, aim for 6 columns in each row, for example moving the labels (From: and To:) into the same cells as checkboxes and removing empty <td> elements: demo here.