0

我不是专业的前端开发人员。我主要做服务器端编程。但是我必须自己完成这项任务并且已经没有想法了。

在此处输入图像描述

在上图中，显示的表格在 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>

我希望“to:”、结束日期文本字段和日历图像位于一行中，并且像“from:”组一样隔开。我还将修复提交和重置按钮的位置。

这个jsp不是我写的。我只是想修复它。任何帮助，将不胜感激。

4

1 回答 1

2

在第一行中，您有<td colspan="6">，这意味着“<td>将延伸超过 6 列。

在第二行中，您有 8 个<td>元素，即 8 列。

在第三个中，您有 10 个（最后两个是空的） - 10 个效果列。

在 HTML 表格中，行间的列数应保持一致，否则某些单元格会被拉伸。

这是一个小提琴，我在您的表格中添加了边框以可视化我在说什么。

要解决您的问题，请针对每行中的 6 列，例如将标签 (From:和To:) 移动到与复选框相同的单元格中并删除空<td>元素：demo here。

于 2013-11-01T16:32:22.860 回答