Question

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

enter image description here

在上图中，显示的表格在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。我只是想解决它。任何帮助将不胜感激。

Answer 1

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

在第二行中，您有8个<td>元素，这些元素为您提供了8列。

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

在HTML表格中，列数应该在行之间保持一致，在其他情况下，某些单元格会被拉伸。

This is a fiddle我在你的桌子上添加了边框，以便想象我正在谈论的内容。

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

tr中的一个td需要更多宽度并推出其他所有内容

1 个答案: