Question

我有一个jsp页面，在该页面上有多种形式。表格的每一行都是一个表格。它包含（3个字段）标题，文本框和名为GO的提交按钮。

我为每一列指定了宽度，这一切工作得很好，直到我不得不在仅1行中引入另外2列。

其中一行包含5个字段时，该行就扭曲了并且与其他行不对齐。

<TABLE border="0" width="100%">
  <TR>
    <TD class="pagecontent">
      <FORM name="form1" method="GET" action="search" onSubmit="return validateFields(this)">
        <INPUT type="hidden" name="quoType" value="NUMBER">
        <TABLE border="0" width=50%>
          <TBODY>
            <TR>
              <TH align="left" width=30%>Customer Number</TH>
              <TD align="left" width=40% class="data">
                <INPUT type="text" name="quo" value="" size="30" maxlength="9">
              </TD>
              <TD align="left" width=30%>&nbsp;&nbsp;
                <INPUT type="submit" class="button" name="Search" value="GO">
              </TD>
            </TR>
          </TBODY>
        </TABLE>
      </FORM>
      <FORM name="form2" method="GET" action="search" onSubmit="return validateFields(this)">
        <INPUT type="hidden" name="quoType" value="NAME">
        <TABLE border="0" width=75%>
          <TBODY>
            <TR>
              <TH align="left" width=19%>Customer Name </TH>
              <TD align="left" width=31% class="data">
                <INPUT type="text" name="quo" id="name" value="" size="30" maxlength="30" onchange="nameDisable()">
              </TD>
              <TH align="left" width=10%> Contains </TH>
              <TD align="left" width=29% class="data">
                <INPUT type="text" name="quoContains" id="nameContains" value="" size="30" maxlength="30" onchange="nameContainsDisable()">
              </TD>
              <TD align="left" width=39%>&nbsp;&nbsp;
                <INPUT type="submit" class="button" name="Search" value="GO">
              </TD>
            </TR>
          </TBODY>
        </TABLE>
      </FORM>
      <FORM name="form3" method="GET" action="search" onSubmit="return validateFields(this)">
        <INPUT type="hidden" name="quoType" value="MANAGER">
        <TABLE border="0" width=50%>
          <TBODY>
            <TR>
              <TH align="left" width=30%>Customer Manager </TH>
              <TD align="left" width=40% class="data">
                <INPUT type="text" name="quo" value="" size="30" maxlength="51">
              </TD>
              <TD align="left" width=30%>&nbsp;&nbsp;
                <INPUT type="submit" class="button" name="Search" value="GO">
              </TD>
            </TR>
          </TBODY>
        </TABLE>
      </FORM>
      <FORM name="form4" method="GET" action="search" onSubmit="return validateFields(this)">
        <INPUT type="hidden" name="quoType" value="TYPE">
        <TABLE border="0" width=50%>
          <TBODY>
            <TR>
              <TH align="left" width=30%>Customer Type </TH>
              <TD align="left" width=40% class="data">
                <INPUT type="text" name="quo" value="" size="30" maxlength="6">
              </TD>
              <TD align="left" width=30%>&nbsp;&nbsp;
                <INPUT type="submit" class="button" name="Search" value="GO">
              </TD>
            </TR>
          </TBODY>
        </TABLE>
      </FORM>
      <FORM name="form5" method="GET" action="search" onSubmit="return validateFields(this)">
        <INPUT type="hidden" name="quoType" value="DETAILS">
        <TABLE border="0" width=50%>
          <TBODY>
            <TR>
              <TH align="left" width=30%>Customer Details </TH>
              <TD align="left" width=40% class="data">
                <INPUT type="text" name="quo" value="" size="30" maxlength="6">
              </TD>
              <TD align="left" width=30%>&nbsp;&nbsp;
                <INPUT type="submit" class="button" name="Search" value="GO">
              </TD>
            </TR>
          </TBODY>
        </TABLE>
      </FORM>
      <FORM name="form6" method="GET" action="search" onSubmit="return validateFields(this)">
        <INPUT type="hidden" name="quoType" value="QUO">
        <TABLE border="0" width=50%>
          <TBODY>
            <TR>
              <TH align="left" width=30%>Customer Quo Number </TH>
              <TD align="left" width=40% class="data">
                <INPUT type="text" name="quo" value="" size="30" maxlength="30">
              </TD>
              <TD align="left" width=30%>&nbsp;&nbsp;
                <INPUT type="submit" class="button" name="Search" value="GO">
              </TD>
            </TR>
          </TBODY>
        </TABLE>
      </FORM>
    </TD>
  </TR>
</TABLE>

在上面的代码中，除了表格2的列之外，所有行和列都对齐，因为它们还有2个字段。

如何正确对齐？

这是针对Internet Explorer的。

单个jsp表对齐中的多种形式

0 个答案: