如何创建具有不同列号的1行表以及适当的别名

Question

我有一张桌子如下所示

​

创建了表，但问题是，当我输入一些大数据时，它的结构正在转变为不规则的结构，正如above.So所示，我的问题是如何正确地维护表的对齐，即使我输入了大数据。

使用的代码如下所示

​

#Invoicebanner {
  width: 610px;
  height: 15px;
  margin: 20px auto;
  border: 0px solid #000;
  text-align: center;
}

<div id="Invoicebanner">
  <div style="border-left: 1px solid black;border-right: 1px solid black;border-top: 1px solid black;width:608px">
    <center><span style="font-size: 18px;"><b>Purchase Order</b></span>
    </center>
  </div>
  <table align="center" style="border: 1px solid " cellpadding="0" cellspacing="0" width="100%">
    <tr align="left">
      <td rowspan="5" style="border-right: 1px solid black;width: 300px;word-break: break-all;">
        <b>&nbspTo,</b>
        <br/>
        <!--  <%=request.getParameter("supplierName")%><br/> -->
        &nbsp
        <%=request.getParameter( "supplierAddress")%>
      </td>
      <td style="border-right: 1px solid black;border-bottom: 1px solid black;word-break: break-all;">
        &nbspP.O.NO
        <br/>
      </td>

      <td style="border-bottom:1px solid black;word-break: break-all;">
        &nbsp
        <%=request.getParameter( "poNo")%>
      </td>
    </tr>

    <tr align="left">
      <td style="border-bottom:1px solid black;border-right: 1px solid black;word-break: break-all;">
        &nbspDate
      </td>
      <td style="border-bottom:1px solid black;word-break: break-all">
        &nbsp
        <%=D ate%>
      </td>
    </tr>
    <tr align="left">
      <td style="border-right: 1px solid black;word-break: break-all;">
        &nbspContact Name:
        <br/>
      </td>
      <td style="word-break: break-all;">
        &nbsp
        <%=request.getParameter( "contactName")%>
          <br/>
      </td>
    </tr>
    <tr align="left">
      <td style="border-right: 1px solid black;width: 110px;word-break: break-all;">
        &nbspContact No:
        <br/>
      </td>
      <td style="word-break: break-all;">
        &nbsp
        <%=request.getParameter( "contactNo")%>
          <br/>
      </td>
    </tr>
    <tr align="left">
      <td style="border-right: 1px solid black;width: 110px;word-break: break-all;">
        &nbspEmail-Id:
      </td>
      <td>
        <td style="word-break: break-all;">
          &nbsp
          <%=request.getParameter( "email")%>
        </td>
    </tr>
  </table>

​

Answer 1

在您的代码中有一个额外的<td>标记(在最后一个<tr>中)删除，您将很好.检查下面的小提琴https://jsfiddle.net/4zfxe8x4/

码

<tr align="left">
      <td style="border-right: 1px solid black;width: 110px;word-break: break-all;">
        &nbspEmail-Id:
      </td>
      <td> <-- REMOVE THIS
        <td style="word-break: break-all;">
          &nbsp
          <%=request.getParameter( "email")%>
        </td>
    </tr>
  </table>

Answer 2

试试这个：

​

.container {
  width: 610px;
  height: 600px;
  margin: 0 auto;
}
.invoicebanner {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  border: 1px solid black;
}
.table {
  width: 610px;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: #000;
  table-layout: fixed;
}
td {
  height: 50px;
  vertical-align: middle;
}
.cell-1 {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

<div class="container">
  <div class="invoicebanner">Purchase Order</div>
  <table class="table">
    <tr>
      <td>To,
        <%=request.getParameter( "supplierAddress")%>
      </td>
      <td class="cell-1">
        <table>
          <tr>
            <td>P.O.NO
            </td>
          </tr>
          <tr>
            <td>Date:</td>
          </tr>
          <tr>
            <td>Contact Name:</td>
          </tr>
          <tr>
            <td>Contact No:</td>
          </tr>
          <tr>
            <td>Email-Id:</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr>
            <td>
              blah blah blah blah blah blah blah blah blah blah blah blah</td>
          </tr>
          <tr>
            <td>
              blah blah blah blah blah blah blah blah blah blah blah blahffhgfhgfhgghfhgffghg</td>
          </tr>
          <tr>
            <td>
              blah blah blah blah blah blah blah blah blah blah blah blah</td>
          </tr>
          <tr>
            <td>
              blah blah blah blah blah blah blah blah blah blah blah blah</td>
          </tr>
          <tr>
            <td>
              blah blah blah blah blah blah blah blah blah blah blah blah</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

​

工作代码